表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
表格不是用来布局页面的,而是用来展示数据的。
表格基本使用
<table>
<tr>
<th>姓名</td>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>8</td>
</tr>
...
</table>
<table></table>
是用于定义表格
的标签。<tr></tr>
标签用于定义表格中的行
,必须嵌套在<table></table>
标签中。<td></td>
用于定义表格中的单元格
(数据单元格),必须嵌套在<tr></tr>
标签中。<th></th>
用于定义表格中的表头单元格
,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中
显示。
表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
<table>
<thead>
<tr>
<th>姓名</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
...
</tr>
...
</tbody>
</table>
<thead></thead>
:用于定义表格的头部。<thead>
内部必须拥有<tr>
标签。一般是位于第一行。<tbody></tbody>
:用于定义表格的主体,主要用于放数据本体。<thead></thead>
和<tbody></tbody>
标签都是放在<table></table>
标签中。
表格属性
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
border | 1或"" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素。 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
width | 像素值或百分比 | 规定表格的宽度。 |
合并单元格
跨行合并:给最上侧单元格添加rowspan="合并单元格的个数"
跨列合并:给最左侧单元格添加colspan="合并单元格的个数"
- 先确定是跨行还是跨列合并。
- 找到目标单元格。写上 合并方式=合并的单元格数量。比如:
<td colspan= "2" ></td>
。 - 删除多余的单元格。