1.5 表格:行、列与表头
列表适合展示一维信息;表格(table)适合展示二维数据:行和列。比如课程表、价格表、成绩单、功能对比、库存清单,只要读者需要横向纵向比较,就很适合用表格。
下面的表格搭建器可以调节行数和列数,也可以打开 / 关闭表头,观察 HTML 结构如何同步变化。
正在加载交互实验...
表格的基本结构
一张表从 <table> 开始。里面每个 <tr> 表示一行,每行里的 <td> 表示普通数据单元格。
html
<table>
<tr>
<td>HTML</td>
<td>结构</td>
</tr>
<tr>
<td>CSS</td>
<td>样式</td>
</tr>
</table>从外到内读:
<table>包住整张表。<tr>表示 table row,也就是表格的一行。<td>表示 table data,也就是普通数据单元格。
正在加载概念检查...
表头单元格
多数有用的表格都会有表头行。表头单元格使用 <th>。浏览器默认会把它显示为加粗,屏幕阅读器也能借助它理解每一列的含义。
html
<table>
<tr>
<th>语言</th>
<th>作用</th>
</tr>
<tr>
<td>HTML</td>
<td>结构</td>
</tr>
<tr>
<td>CSS</td>
<td>样式</td>
</tr>
</table>为了让结构更清楚,也可以把表头和主体分组:
html
<table>
<thead>
<tr>
<th>语言</th>
<th>作用</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>结构</td>
</tr>
</tbody>
</table>标题与可访问性
<caption> 可以给表格加标题。它直接放在 <table> 内部,通常写在行或分组之前。
html
<table>
<caption>前端三层</caption>
<tr>
<th>层</th>
<th>用途</th>
</tr>
<tr>
<td>HTML</td>
<td>内容与结构</td>
</tr>
</table>表格应该用于真正的表格数据,不要用来做页面布局。页面区块排版应该交给 CSS 的 Flexbox 或 Grid。
正在加载概念检查...
正在加载本节练习...