html 中的表格 <table>
由行 <tr>
组成,每行由单元格 <td>
组成。
所以表格是由行组成(行由列组成),而不是由行和列组成。
table 标签 display: table
,属于块级元素。
table 的属性
- border:边框粗细,单位为像素
- cellspacing:单元格和单元格之间的距离,单位为像素
语义化表格
html
<table border="1" cellspacing="0">
<caption>
表格标题
</caption>
<!--表头-->
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>第1行单元格1</td>
<td>第1行单元格2</td>
</tr>
<tr>
<td>第2行单元格1</td>
<td>第2行单元格2</td>
</tr>
</tbody>
<!--表尾-->
<tfoot>
<tr>
<td>表尾单元格1</td>
<td>表尾单元格2</td>
</tr>
</tfoot>
</table>
简易表格
html
<table border="1" cellspacing="0">
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
</table>
合并单元格
水平方向合并 colspan
如 colspan="2"表示当前单元格在水平方向上占据两个单元格的位置。
html
<table border="1" cellspacing="0" style="width: 100px;height:100px">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
垂直方向合并 rowspan
如 rowspan="2"表示当前单元格在垂直方向上占据两个单元格的位置。
html
<table border="1" cellspacing="0" style="width: 100px;height:100px">
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>