1.表格标签
table 表格
thead 表格头
tbody 表格主体
tfoot 表格尾
tr 表格行
th 元素定义表头
td 元素定义表格单元
2.表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充
3.基本结构
HTML
<table>
<tbody>
<tr><!--行-->
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
</table>
CSS
th,td{padding:0;}
table{boder-collapse:collapse;}
/*table css reset*/
th,td{boder:1px solid black; height:50px; width:100px;}
table{width:500px;}
效果图
注意事项
- 不要给table,th,td以外的表格标签加样式；
- 单元格默认平分table 的宽度
- th里面的内容默认加粗并且左右上下居中显示
- td里面的内容默认上下居中左右居左显示
- table 决定了整个表格的宽度；
- table里面的单元格宽度会被转换成百分比；
- 表格里面的每一列必须有宽度；
- 表格同一竖列继承最大宽度；
- 表格同行继承最大高度；
4.单元格合并
- colspan 属性规定单元格可横跨的列数。
<td colspan="2"></td>
/必须把合并后的单元格删除/
- rowspan 属性规定单元格可横跨的行数。
<td rowspan="2"></td>
/必须把合并后的单元格删除/
