table布局中的一些关键点

简介: 【table布局点1:表格边框】 border-spacing:0; border-collapse:collapse;   显示效果为: 加之前效果 加之后效果 【table布局点2:跨列、跨行的单元格】 1 2 3 4 5...

 

table布局点1:表格边框

 border-spacing:0;
 border-collapse:collapse;

  显示效果为:

加之前效果

加之后效果

table布局点2:跨列、跨行的单元格

 1 <html>
 2 
 3 <body>
 4 
 5 <h4>横跨两列的单元格:</h4>
 6 <table border="1">
 7 <tr>
 8   <th>姓名</th>
 9   <th colspan="2">电话</th>
10 </tr>
11 <tr>
12   <td>Bill Gates</td>
13   <td>555 77 854</td>
14   <td>555 77 855</td>
15 </tr>
16 </table>
17 
18 <h4>横跨两行的单元格:</h4>
19 <table border="1">
20 <tr>
21   <th>姓名</th>
22   <td>Bill Gates</td>
23 </tr>
24 <tr>
25   <td rowspan="2">电话</td>
26   <td>555 77 854</td>
27 </tr>
28 <tr>
29   <td>555 77 855</td>
30 </tr>
31 </table>
32 
33 </body>
34 
35 
36 </html>

横跨两列的单元格:

姓名 电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格:

姓名 Bill Gates
电话 555 77 854
555 77 855

 

一、
1、显示表格的4个边框:<table border frame=box>
2、只显示上边框: <table border frame=above>
3、只显示下边框: <table border frame=below>
4、只显示上下边框: <table border frame=hsides>
5、只显示左右边框: <table border frame=vsides>
6、只显示左边框: <table border frame=lhs>
7、只显示右边框: <table border frame=rhs>
8、不显示任何边框: <table border frame=void>

二、
1、只显示列与列之间的分隔线:<table rules=cols>
2、只显示行与行之间的分隔线:<table rules=rows>
3、不显示任何分隔线: <table rules=none> (只显示四个边框)
4、显示所有分隔线: <table rules=all>

但是还要提醒的是,nc不支持这些表格属性!

 

目录
相关文章
|
10月前
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
隐藏el-table-column过多的内容并进行浮窗展示
|
28天前
|
前端开发 搜索推荐 容器
div+css的布局较table布局有什么优缺点?
div+css的布局较table布局有什么优缺点?
|
11月前
|
前端开发 容器
【HTML+CSS】grid自适应网站布局之服务项目展示
【HTML+CSS】grid自适应网站布局之服务项目展示
104 0
|
11月前
|
前端开发 数据处理 数据格式
原生table实现矩阵展示打勾功能
原生table实现矩阵展示打勾功能
63 0
获取 table 距离窗口上方的高度(有深度的文章)
获取 table 距离窗口上方的高度(有深度的文章)
170 0
|
前端开发 API
View的测量、布局和绘制过程中的关键方法
我们这里说的View的测量、布局和绘制,实质上是针对ViewGroup的,简单起见就不区分View和ViewGroup。View的测量、布局和绘制是包含在ViewGroup流程中的。
|
前端开发 容器
通俗重制系列--Grid布局
通俗重制系列--Grid布局
106 0
|
前端开发
table布局的一些总结
table-layout作用就是让表格布局固定,使表格的宽度不会根据内容多少而动态变化。
127 0
table布局的一些总结
减小TabLayout高度而不影响每个tab展示的几种方法
在Support Design库中有一个新的组件TabLayout,配合TabItem实现tab页面的形式。 但是图标和文字组合的tab的默认情况下,TabLayout中的tab太高,占据太多布局。 但是如果直接将TabLayout高度改小,很容易出现图标显示不全的情况,因为图标和字体及两者的间距没有跟着改变。 这时可以从几个方面处理:
235 0
DHL
|
算法 安全 Java