在HTML开发中，表格是展示结构化数据的常用元素，很多时候我们需要调整表格中单元格的位置，比如让某个单元格跨多行多列、让单元格内的内容靠左或居中显示，掌握对应的调整技巧能让表格布局更符合需求。
一、通过HTML属性调整单元格跨行跨列
HTML原生的<td>和<th>标签提供了colspan和rowspan属性，可以实现单元格跨列和跨行的效果，相当于从结构上调整了单元格的位置范围。
colspan用于设置单元格横向跨越的列数，rowspan用于设置单元格纵向跨越的行数，两个属性都接收正整数作为值。
<table border="1" width="400">
<tr>
<th>姓名</th>
<th colspan="2">成绩</th>
</tr>
<tr>
<td>张三</td>
<td>语文：90</td>
<td>数学：95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文：88</td>
<td>数学：92</td>
</tr>
<tr>
<td>语文：85</td>
<td>数学：90</td>
</tr>
</table>
上面的代码中，第一行的成绩表头使用colspan="2"横向跨越了2列，李四的姓名单元格使用rowspan="2"纵向跨越了2行，通过这种方式可以直接改变单元格在表格中的占位范围。
二、通过CSS调整单元格内对齐方式
如果只是需要调整单元格内文本或内容的位置，不需要改变单元格本身的占位，可以使用CSS的对齐属性来实现。
1. 水平对齐
可以使用text-align属性调整单元格内内容的水平位置，可选值包括left（左对齐）、center（居中对齐）、right（右对齐）。
/* 所有单元格内容居中对齐 */
td, th {
text-align: center;
}
/* 第一列单元格内容左对齐 */
td:first-child {
text-align: left;
}
2. 垂直对齐
可以使用vertical-align属性调整单元格内内容的垂直位置，可选值包括top（顶部对齐）、middle（垂直居中对齐）、bottom（底部对齐）。
/* 所有单元格内容垂直居中对齐 */
td, th {
vertical-align: middle;
}
/* 表头单元格内容顶部对齐 */
th {
vertical-align: top;
}
三、通过表格结构微调单元格位置
如果需要更精细地调整单元格的位置，还可以通过调整表格的整体结构和单元格的边距来实现。
1. 调整单元格内边距
使用padding属性可以给单元格内部添加内边距，从而让内容在单元格内的位置发生偏移。
/* 单元格上下内边距10px，左右内边距20px */
td {
padding: 10px 20px;
}
2. 调整单元格外边距
需要注意<td>标签默认不支持margin属性，如果需要调整单元格之间的间距，可以给表格设置border-spacing属性，或者将表格的border-collapse设置为separate后使用border-spacing控制单元格间距。
table {
border-collapse: separate;
/* 单元格之间水平间距10px，垂直间距5px */
border-spacing: 10px 5px;
}
四、常见场景示例
下面是一个综合示例，实现了一个表头跨列、部分单元格跨行、内容居中对齐的表格：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
width: 500px;
}
td, th {
border: 1px solid #333;
padding: 8px;
text-align: center;
vertical-align: middle;
}
.highlight {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">学生成绩表</th>
</tr>
<tr>
<th>姓名</th>
<th>科目</th>
<th>分数</th>
</tr>
<tr>
<td rowspan="2" class="highlight">张三</td>
<td>语文</td>
<td>92</td>
</tr>
<tr>
<td>数学</td>
<td>98</td>
</tr>
<tr>
<td>李四</td>
<td colspan="2">缺考</td>
</tr>
</table>
</body>
</html>
以上技巧覆盖了HTML表格单元格位置调整的大部分场景，开发者可以根据实际需求选择合适的方案，也可以组合使用多种方法实现更复杂的布局效果。
HTML_table单元格对齐colspanrowspancss_text_align修改时间：2026-06-26 17:00:52