在网页里放一张对照数据，很多初学者的第一反应是先用 <div> 拼出几行几列，再靠对齐把它排得像表格。问题是，这样做出来的东西只是“看起来像表格”，浏览器、搜索引擎和读屏软件并不知道哪一格是标题、哪一格是数据，更不知道某个数值属于哪一行哪一列。当你真正需要呈现的是行列对照关系时，用 HTML 的表格标签把结构标出来，才能让这层关系被机器和人同时读懂。
下面以一张很小的表为例来说明判断：假设要展示三款硬盘的容量和价格。先不谈怎么好看，只谈怎么把“标题、表头、数据”这三类角色标清楚。
先确认：这份数据到底是不是表格
不是所有排成几列的内容都适合用 <table>。表格标签表达的是“二维对照”——每个数据单元格都同时属于某一行和某一列，行列的交叉点才有意义。硬盘容量和价格就是典型例子：一行代表一款产品，一列代表一个属性，交叉处是具体数值。
如果你的内容只是并列的几个条目，彼此之间没有列的对应关系，那它更像列表而不是表格，用 <ul> 或 <ol> 反而更贴切。把普通列表硬塞进表格，会凭空制造出不存在的行列关系，读起来更费劲。所以动手写标签之前，先问一句：这些数据去掉表格外壳后，还需要靠“第几列”来理解吗？需要，才用表格。
表格的基本骨架
一张表格由外层容器和内部的行、单元格组成。最小的结构是这样的：
<table>
<tr>
<td>希捷 2TB</td>
<td>399 元</td>
</tr>
<tr>
<td>西数 4TB</td>
<td>629 元</td>
</tr>
</table>这里 <table> 是整张表的容器，<tr>（table row）是一行，<td>（table data）是一个数据单元格。单元格不会自己换行，是 <tr> 把它们分组成一行，行与行叠起来就成了表格。
但上面这段有个明显缺陷：没人知道第一列是产品名、第二列是价格。机器看到的只是四个孤立的数据格。要补上这层含义，就需要表头单元格。
用表头单元格标出“这列（或这行）代表什么”
表头单元格用 <th>（table header）而不是 <td>。它和数据单元格在位置上一样占一格，区别在于语义：<th> 声明的是“这一组数据的标题”，<td> 声明的是“具体的数据值”。多数浏览器会默认把 <th> 的文字加粗并居中，但这只是附带的视觉表现，真正重要的是它向机器表明了身份。
给前面的例子加上一行表头：
<table>
<tr>
<th>型号</th>
<th>价格</th>
</tr>
<tr>
<td>希捷 2TB</td>
<td>399 元</td>
</tr>
<tr>
<td>西数 4TB</td>
<td>629 元</td>
</tr>
</table>现在第一行的两个 <th> 分别说明了下方两列的含义。读屏软件在念出“629 元”时，可以同时告诉用户这是“价格”列的数据，而不是让听的人自己去数到底是第几格。
表头不一定在顶部：用 scope 指明方向
表头有时在最上面一行，有时在最左边一列。比如一张“城市 × 季度销量”的表，左侧每一行开头是城市名，这些城市名其实是行表头，也该用 <th>。
当一张表同时存在行表头和列表头时，光用 <th> 还不够，因为机器可能分不清某个表头是管一整列还是一整行。这时用 scope 属性说清楚方向：scope="col" 表示这个表头作用于它所在的那一列，scope="row" 表示作用于它所在的那一行。
<table>
<tr>
<th scope="col">城市</th>
<th scope="col">一季度</th>
<th scope="col">二季度</th>
</tr>
<tr>
<th scope="row">北京</th>
<td>120</td>
<td>150</td>
</tr>
<tr>
<th scope="row">上海</th>
<td>98</td>
<td>110</td>
</tr>
</table>在这张表里，顶部三个 <th scope="col"> 管住各自下方的列，左侧的“北京”“上海”用 <th scope="row"> 管住各自右侧的行。于是“150”这个数据的身份就被两头夹住了：它既属于“北京”这一行，又属于“二季度”这一列。对于只扫一眼的普通读者，这种双向标注看不出区别；但对读屏用户来说，它是能不能听懂数据的关键。
对结构简单、只有一行列表头的小表，不加 scope 通常也能被正确理解；一旦出现行、列两套表头，就建议把 scope 补上，避免歧义。
给表格一个标题：caption
一张表往往需要一句话说明它到底在讲什么，比如“2024 年各城市季度销量（单位：台）”。把这句话写成普通段落放在表格外面当然可以，但更规范的做法是用 <caption>，让这个标题在结构上就隶属于这张表。
<caption> 必须紧跟在 <table> 开始标签之后，写在所有行的前面：
<table>
<caption>2024 年各城市季度销量（单位：台）</caption>
<tr>
<th scope="col">城市</th>
<th scope="col">一季度</th>
<th scope="col">二季度</th>
</tr>
<!-- 数据行省略 -->
</table>这样做的好处是标题和表格绑定在一起：读屏软件会先念出这句说明，用户在知道“这是什么表”之后再去听具体数据，不至于一上来就被一串数字淹没。单位、统计口径、时间范围这类容易被忽略但很重要的信息，放进 <caption> 是很合适的归宿。
把三类角色对号入座
回到最初的目标——为一张简单数据表选对标记结构，其实就是把内容拆成三种角色，再分别对应到标签上。整张表想说明的主题，交给 <caption>；每一列或每一行代表什么属性，交给 <th>，必要时用 scope 说明它管的方向；交叉点上的具体数值，交给 <td>。行由 <tr> 负责切分，整体由 <table> 包住。
判断的顺序也可以这样走：先确认数据确实是行列对照、值得用表格；再决定哪些格子是说明性的标题、哪些是实打实的数值，前者用 <th>、后者用 <td>；接着看表头是只有列方向、还是行列都有，决定要不要加 scope；最后补一句 <caption> 把表的主题和单位交代清楚。
把这几步走完，一张结构清晰的数据表就立起来了。它在没有任何样式的情况下也能被正确理解，谁是标题、谁是表头、谁是数据，不用猜也不用数——这正是用对标签而不是用对齐硬凑出来的区别。
