表格
表格的基本组成
<table> <!-- 表格 -->
<caption></caption> <!-- 表格标题 -->
<thead> <!-- 表格头部 -->
<tr> <!-- 行 -->
<th></th> <!-- 列 -->
<th></th> <!-- 列 -->
</tr>
</thead>
<tbody> <!-- 表格主体 -->
<tr> <!-- 行 -->
<th></th> <!-- 列 -->
<th></th> <!-- 列 -->
</tr>
</tbody>
<tfoot> <!-- 表格底部 -->
<tr> 行
<th></th> <!-- 列 -->
<th></th> <!-- 列 -->
</tr>
</tfoot>
</table>
嵌套规则
表格相关的内容要写在table下
- table的子级有:
- caption 表格标题
- thead 表格头部
- tbody 表格主体
- tfoot 表格底部
- thead的子级有:
- tr 行
- th 列 (只有在thead下面的列,才是th)
- tbody的子级有:
- tfoot的子级有:
- thead 和 tfoot都不是必须的
- 不写tbody,系统会自动解析为tbody
表格样式默认样式:(不常用)
table(类似block)
display: table;
caption
display: table-caption;
thead
display: table-header-group;
tr
display: table-row;
th
display: table-cell; 垂直居中有用
tbody
display: table-row-group;
tfoot
display: table-footer-group;
样式了解即可,只有在用表格的情况下,我们才使用table
th,td
padding: 0;
table
border-collapse: collapse;
需要清除的样式
标签样式
<table border="1" cellspacing="20" cellpadding="50"></table>
- border 边框粗细
- cellspacing 单元格margin
- cellpadding 单元格padding
样式表样式
border-spacing: 20px;
- 单元格margin,相当于 cellspacing
border-collapse: collapse; 单元格合并
- separate 分离,默认值
- collapse 边框合并为单一边框,忽略border-spacing
vertical-align: bottom;
操作单元格合并
<td rowspan="2">下午</td>
<td colspan="7">1</td>
表格使用的特性:
1.修改其中一个的宽度,会影响整列的宽度
2.修改其中一个的高度,会影响整行的高度