colspan和rowspan用于逻辑占位而非视觉拉伸：colspan=”n”使单元格占据当前行n列，后续列需跳过；rowspan=”m”使其跨m行，下方m-1行对应列须留空，否则结构错乱。
html 表格里 colspan 和 rowspan 怎么用才不串行
合并单元格本质是「让一个单元格占据多个逻辑位置」，不是视觉拉伸。错用 colspan 或 rowspan 会导致后续 <tr> 行数对不上、浏览器自动补 <code><td>、样式错位。 <ul><li> <code>colspan="2" 表示该 <td> 或 <code><th> 占据当前行的 2 列 —— 后面那列就「不存在」了，本行其他单元格要少写一个 <li> <code>rowspan="3" 表示该单元格向下跨 3 行 —— 接下来两行的对应列位置必须留空（不能写 <td>），否则表格结构会塌 <li>常见错误现象：<code>Uncaught Error: Invalid table structure（控制台不一定报）、右侧列整体右移、表头和数据列错位
<td>，再决定在哪加 <code>colspan/rowspan合并多行多列时，<thead> 和 <code><tbody> 的 <code>colspan 必须对齐
表头跨列后，<tbody> 里每行的单元格总数必须和 <code><thead> 的「有效列数」一致。浏览器不会帮你算，它只按标签数量渲染。 <ul><li>比如 <code><th colspan="2">姓名</th> <th>年龄</th> → 这一行共 3 列视觉宽度，但只有 2 个 <th> 标签；对应 <code><tbody> 每行就得写 2 个 <code><td>：第一个带 <code>colspan="2"，第二个单独写
<thead> 用了 <code>rowspan 跨行，<tbody> 第一行就不能在被跨的列位置放 <code><td>，否则会顶掉表头的垂直空间 <li>检查方法：删掉所有 <code>colspan/rowspan，看表格是否「列数均匀」；再逐个加回，每次验证渲染效果用 JavaScript 动态合并单元格，为什么 cell.colSpan 设了没反应
直接改 dom 元素的 colSpan 属性可以生效，但前提是该单元格还没被浏览器布局计算过，且父级 <tr> 结构没破坏。 <ul><li>常见错误：先插入完整表格，再遍历 <code><td> 改 <code>colSpan → 浏览器已按原始结构排版，强行改属性只会让视觉错乱
colspan 属性；或用 insertRow()/insertCell() 构建新行，再设 cell.colSpan = 2 cell.rowSpan 在 IE 中大小写敏感（rowSpan），现代浏览器不区分，但统一用驼峰更稳DocumentFragment），避免反复重排合并后内容居中不对？text-align 和 vertical-align 的作用范围
colspan/rowspan 不改变 CSS 盒模型，只是让单元格“占位”，对齐行为仍由自身样式控制，和周围单元格无关。
立即学习“前端免费学习笔记（深入）”；
-
text-align: center只影响单元格内文字水平位置，不影响它在整行中的跨度 -
vertical-align: middle控制内容在单元格高度内的垂直位置，但如果rowspan="3"，而相邻行高度不同，这个单元格的「中线」可能看起来偏高或偏低 - 容易踩的坑：给整个
<table> 设 <code>text-align: center，结果所有文字都居中，误以为是合并导致的；其实只是继承生效了 - 调试建议：临时加
border: 1px solid red到<td>，看清真实边界再调对齐 表格合并真正难的不是语法，是脑子里得始终有张「行列坐标网格图」——每个 <code><td> 都有明确的 (row, col) 位置，<code>colspan是往右涂格子，rowspan是往下涂格子，涂完的地方不能再落笔。漏算一格，整张表就偏了。