表格
表格的基本组成
<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.修改其中一个的高度，会影响整行的高度