在网页开发中，使用HTML标签创建数据表格是最基础也最常用的技能之一。HTML通过一组语义化标签，让开发者能够以行列形式组织信息，无论是商品价格列表、学生成绩还是后台数据报表，都可以用标准表格清晰呈现。与用div加css模拟的布局不同，原生table标签携带了明确的行列语义，对搜索引擎和无障碍访问更加友好。
一、表格的基础结构与核心标签
一个最基础的HTML数据表格由<table>作为容器，内部使用<tr>定义行，<td>定义普通单元格。若某一格是列或行的标题，应当使用<th>而非<td>，这样浏览器会自动将其加粗并居中，同时告诉辅助技术这是标题内容。
为了提升可维护性，推荐将表头放入<thead>，主体数据放入<tbody>。这种结构即使表格被css隐藏了视觉样式，机器依然能读懂哪部分是标题、哪部分是数据。如下代码展示了一个最简单的两列三行表格：
<table border="1" cellpadding="6">
<thead>
<tr>
<th>姓名</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>92</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
</tr>
</tbody>
</table>
上面的代码中，border属性用于显示边框，cellpadding控制单元格内边距。虽然现代开发多用css替代这些表现层属性，但在快速原型或教学示例中，它们能降低初学者的理解成本。注意<tr>只能直接包含<th>或<td>，不能把文字直接写在<tr>下，否则HTML校验会报错。
二、为表格添加标题与语义说明
当表格出现在文章或后台页面中时，最好用<caption>标签给出整体说明。该标签必须紧接在<table>开始标签之后，它会在表格上方渲染一段文字，同时被屏幕阅读器当作表格摘要读出，有助于视障用户快速判断表格主题。
除了caption，还可以用scope属性增强th的语义。例如<th scope="col">表示这是列标题，<th scope="row">表示这是行标题。在复杂报表中，这种写法能显著减少读屏软件的错误解读。下面示例在之前表格基础上补充了标题与scope：
<table border="1" cellpadding="6">
<caption>2023年春季期末考试成绩</caption>
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">分数</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">张三</th>
<td>92</td>
</tr>
<tr>
<th scope="row">李四</th>
<td>85</td>
</tr>
</tbody>
</table>
这里将第一列的姓名改为了<th scope="row">，因为从语义上看，姓名标识了当前行的主体。这种方式在二维表中非常自然：横向看姓名是行标题，纵向看分数属于列标题。合理使用scope，可以让同一份HTML在各类解析器下都保持一致的语义。
三、合并单元格与多表头处理
实际业务里的表格往往比基础示例复杂，例如需要把多个列合并为一个大标题，或者让某个单元格横跨两行。HTML提供了colspan与rowspan两个属性：colspan让单元格向右合并若干列，rowspan让单元格向下合并若干行。使用它们时，被合并方向上的其他<td>或<th>必须删除，否则会出现错位。
下面示例展示了一个带合并表头与跨行数据的成绩表。表头第一行将数学与语文合并在科目之下，第二行再细分；左侧姓名则跨两行表示同一人两科成绩：
<table border="1" cellpadding="6">
<caption>学生科目成绩明细</caption>
<thead>
<tr>
<th rowspan="2">姓名</th>
<th colspan="2">科目</th>
</tr>
<tr>
<th>数学</th>
<th>语文</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>95</td>
<td>88</td>
</tr>
<tr>
<td>李四</td>
<td>76</td>
<td>90</td>
</tr>
</tbody>
</table>
这段代码中，姓名列的<th rowspan="2">占据了表头两行，因此表头第二行只剩下两个科目子标题。初学者常犯的错误是在使用rowspan后，仍在下一行重复写姓名单元格，结果浏览器会多挤出空白格。只要记住：被合并掉的位置不要再写标签，布局就能保持整齐。
四、用CSS分离样式与结构
虽然HTML表格标签能借助border等属性快速出效果，但项目级开发通常建议把样式交给CSS。通过为table添加class，在样式表中规定边框折叠、奇偶行变色、悬停高亮等效果，既能让HTML更专注语义，也方便整体换肤。下面给出一段配套的CSS示例：
.data-table {
border-collapse: collapse;
width: 100%;
}
.data-table th,
.data-table td {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
}
.data-table tbody tr:nth-child(even) {
background-color: #f7f7f7;
}
.data-table tbody tr:hover {
background-color: #eef6ff;
}
将上面的样式与前面任一表格结合，只需把<table>改为<table class="data-table">并去掉border属性即可。border-collapse会让相邻边框合并为单线，避免双线粗边；nth-child(even)实现了隔行变色，提升大批量数据下的可读性。这种结构样式分离的做法，也是W3C标准所推荐的实践。
五、常见误区与校验建议
不少刚接触HTML的人会用div配合float去拼出所谓表格，或者在table里直接写文本而不包td。前者丢失了语义，搜索引擎难以抽取行列关系；后者属于非法嵌套，浏览器虽可能勉强渲染，但验证工具会提示错误，且在导出Excel、被爬虫读取时容易失败。
另一个误区是滥用table做页面整体布局。早期网页因css不成熟常用多列表格切分版块，如今这已被flex与grid取代。数据表格只应承担数据呈现职责，导航、卡片等布局请使用对应语义标签。写完表格后，可用W3C校验服务或编辑器内置检测确认<tr>、<td>的嵌套是否合规，避免隐性渲染异常。
掌握上述table、thead、tbody、th、td以及colspan、rowspan的组合用法，你就能用HTML标签创建出任何规整的数据表格。从简单名单到跨行跨列报表，底层逻辑始终是对行列关系的准确描述，而不是视觉上的对齐。