用colspan="2"可使单元格横跨两列，需确保整行列数总和正确；text-align: center控制单元格内行内内容居中，vertical-align: middle才实现垂直居中；表格整体居中须设table的margin: 0 auto和width。
怎么用 colspan 合并两列
直接在 <td> 或 <th> 标签里加 colspan="2"，它会让这个单元格横跨当前行的两个列位置。关键不是“合并之后再处理”，而是“写对了 colspan，表格结构才不会错乱”。
常见错误现象：colspan="2" 写了但看起来没效果——大概率是那一行其他 <td> 没少写一个，导致总列数超了。比如一行本该 3 列，你写了一个 <td colspan="2"> + 一个 <td>，是对的；但如果还多写一个 <td>，浏览器会强行补空列或错位。
- 确保整行的列数总和等于预期（例如：一个
colspan="2"+ 一个普通<td>= 3 列） -
colspan只能用于<td>和<th>，不能写在<tr>或<table>上 - 不要混用过时的
align属性（如align="center"），优先用 CSS
文字居中为什么 text-align: center 有时不生效
text-align: center 控制的是单元格内**行内内容**（比如纯文本、<img>）的水平位置，不是把整个 <td> 在表格里挪动。所以它对 <div>、<p> 这类块级子元素默认无效。
使用场景：你想让“合并后的标题”几个字居中，而不是让那个 <td> 自己居中。
立即学习“前端免费学习笔记（深入）”；
- 最简做法：给合并的单元格加
style="text-align: center;" - 如果里面嵌了
<div>，得额外给它设margin: 0 auto并声明width，或者改用display: flex; justify-content: center - 整表统一控制更省事：
table td, table th { text-align: center; }
vertical-align: middle 必须配 td 或 th 才起作用
垂直居中不是靠 text-align，也不能写在 <table> 上——W3C 明确禁止 vertical-align 用于 <table> 元素。它只对 <td>、<th> 有效，且影响的是单元格内部内容的**基线对齐位置**。
容易踩的坑：合并单元格后内容看起来“偏上”或“贴顶”，往往是因为没设 vertical-align，或者被 line-height、padding 干扰了视觉判断。
- 推荐统一设置：
td, th { vertical-align: middle; } - 避免只给合并单元格单独加，结果其他单元格还是默认
baseline，造成高度不一致 - 如果用了
table-layout: fixed，记得同时设好列宽，否则vertical-align可能被压缩失效
整张表格在页面中居中要单独处理
合并两列、文字居中，都只是单元格内部的事；表格本身是否在页面中间，是另一个问题。很多人以为“合并完了自然就居中了”，其实完全无关。
必须给 <table> 加 margin: 0 auto，并且配套一个明确的 width（比如 width: 600px 或 width: 80%），否则 auto 没空间可分。
-
<table style="margin: 0 auto; width: 600px;">是最稳的写法 - 别给
<td>加margin: 0 auto——<td>是table-cell，不支持margin - 父容器如果有
text-align: left且没重置，可能让inline-table方案出错，不如直接用margin: 0 auto
真正麻烦的点不在合并或居中本身，而在于：你改了一个地方（比如加了 colspan），结果整行错位、文字不居中、表格跑偏——这时候得倒回去查列总数、查样式作用域、查 display 类型，而不是盯着“居中”两个字反复试。
