表格是网页中呈现结构化数据最直接的方式，比如成绩单、价格对比、课程安排这类内容，用表格展示远比一堆段落文字清晰。HTML提供了一套专门的表格标签，核心是table、tr、td三者的嵌套配合。本文从基础写法讲到单元格合并和布局技巧，帮你把表格用对、用好。
一、HTML表格的基础结构与标签写法
一个最小的表格由三个标签构成：<table>定义表格本身，<tr>定义一行，<td>定义行内的一个单元格。这三者是严格的嵌套关系，单元格必须写在行里，行必须写在表格里，顺序不能乱。下面是一个两行两列的最简示例：
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>示例中的border="1"是为了让边框在浏览器里可见，方便观察结构。实际项目中不建议用这个属性控制样式，应该交给CSS处理，后面会详细说明。
除了基本三件套，还有两个常用标签：<th>表示表头单元格，默认加粗居中显示；<caption>定义表格标题，会显示在表格上方。规范一点的写法还会把表头行包进<thead>，数据行包进<tbody>：
<table border="1">
<caption>学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
<td>96</td>
</tr>
</tbody>
</table>使用thead和tbody的好处在于语义明确，打印长表格时表头可以自动重复，配合CSS也能单独控制表头样式。初学者常犯的错误是漏掉<tr>直接把<td>塞进<table>里，这种写法在部分浏览器里能渲染，但结构不合法，容易出排版问题。
二、单元格合并：colspan与rowspan的用法
实际表格经常出现不规则结构，比如某格横跨两列、某格竖占两行，这就要用到colspan（跨列）和rowspan（跨行）两个属性。理解它们的关键在于：某个单元格占用了额外的列或行后，同一行（或同列）后续的单元格数量要相应减少，否则表格会错位。
先看跨列的例子。表头想要一个横跨两列的“成绩”大标题：
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">成绩</th>
<!-- 这里跨了2列，后面不能再写单元格，否则多出一格 -->
</tr>
<tr>
<td>张三</td>
<td>92</td>
<td>88</td>
</tr>
</table>再看跨行。让第一列的“上午”竖着占两行：
<table border="1">
<tr>
<td rowspan="2">上午</td>
<td>语文课</td>
</tr>
<tr>
<!-- 上午那格已被上一行占用，这里只写一格即可 -->
<td>数学课</td>
</tr>
</table>跨行相对难理解一些，可以想象成上面的单元格“向下伸手”占住了下面的位置，被占住的行在写单元格时就要跳过那个位置。调试合并表格时，给表格加上边框观察格线，错位问题会一目了然。
三、用CSS控制表格样式与表格布局方法
老式写法喜欢在标签上堆width、cellpadding、cellspacing等属性，这些在HTML5中大多已废弃。现代做法是结构与样式分离，用CSS统一控制：
<style>
table {
border-collapse: collapse; /* 合并相邻边框，去掉双重线 */
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px 12px; /* 单元格内边距 */
text-align: left;
}
thead th {
background: #f5f5f5;
}
tbody tr:hover {
background: #eef6ff; /* 鼠标悬停高亮 */
}
</style>其中border-collapse: collapse非常关键，不设置它的话相邻单元格边框会叠加成双线，视觉上很粗糙。隔行变色可以用tbody tr:nth-child(even)选择器实现，比手动给每行加class干净得多。
关于表格布局还要提一点：早期网页流行用表格做整个页面的骨架布局，把导航、侧栏、内容区都塞进各种表格格里。这种做法现在已被淘汰，原因是表格布局代码冗余、语义混乱、移动端适配困难，正确的页面布局应该用div配合CSS的flex或grid完成。表格的正确用途只有一个——展示二维数据。判断标准很简单：如果内容是“行与列对应的数据关系”，用表格；如果是页面区域划分，用布局标签加CSS。
另外几个实用细节：单元格内容为空时建议写一个 占位，否则边框可能显示不全；数字列可以用text-align: right右对齐方便比较大小；长表格记得用caption或aria-label说明用途，对屏幕阅读器更友好。掌握这些要点后，面对各类数据展示需求基本都能应对自如。