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