colgroup仅能统一设置列宽等有限样式，无法控制padding或font-size；thead/tbody/tfoot须按规范顺序放置以保障可访问性。
用 colgroup 统一控制列样式，但别指望它管所有事
colgroup 的作用是给一列或多列“批量贴标签”，比如统一设宽度或背景色。它必须放在 <table> 内、<code><thead> 之前，否则浏览器会忽略。常见错误是把它塞进 <code><tbody> 里，或者以为加了 <code>colgroup 就能控制 padding 或 font-size —— 实际上这些属性对 col 标签完全无效，最终还得靠 td/th 或 CSS 类来覆盖。
示例中这样写才生效：
<table>
<colgroup>
<col span="2" style="width: 120px;">
<col style="background: #f0f0f0;">
</colgroup>
<thead><tr><th>A</th><th>B</th><th>C</th></tr></thead>
<tbody><tr><td>x</td><td>y</td><td>z</td></tr></tbody>
</table>
-
span="2"表示前两列共用同一组样式，比写两个<col>更简洁 - 如果某列需要单独样式，就单独写一个
<col>，不要混在span里 - 注意：IE 对
colgroup的background支持不稳定，真要兼容老版本，得 fallback 到td:nth-child(n)
用 thead/tbody/tfoot 做语义分组，不是为了好看
这三组标签本质是告诉浏览器和辅助技术“哪部分是标题、哪部分是数据、哪部分是汇总”。它们不自带样式，但能让你的 CSS 更精准，比如 thead th { sticky: top; } 实现表头悬浮，或者用 tfoot tr { font-weight: bold; } 突出合计行。容易踩的坑是把 tfoot 放在 tbody 后面 —— 它应该在 thead 之后、tbody 之前，否则某些屏幕阅读器可能跳过它。
-
thead只能包含tr，且里面最好只用th；混进td会削弱语义 -
tbody可以有多个，适合分页加载时动态插入新块 -
tfoot在 HTML 源码位置靠前，但渲染时仍显示在底部，这是规范行为，别误以为是 bug
跨列合并用 colspan，但别让它破坏表格结构
当一行里某个单元格要横跨多列（比如标题居中占满三列），就用 colspan。关键点在于：整行的列总数必须守恒。例如三列表格中，<td colspan="2">aaa</td>
<td>bbb</td> 是合法的（2+1=3）；但写成 <td colspan="3">aaa</td>
<td>bbb</td> 就会导致第四个单元格悬空，浏览器会自动纠错，但布局可能错乱。
立即学习“前端免费学习笔记（深入）”；
- 检查方式：数每行所有
td和th的colspan值之和，必须等于表格定义的列数 - 和
colgroup配合时，colspan会跳过被合并的列，所以colgroup中的col数量应按“原始列数”算，不是按视觉列数 - 避免嵌套
colspan：比如在已colspan="2"的单元格里再放一个table并设colspan，可访问性会急剧下降
响应式分组布局优先考虑 CSS Grid，而不是硬凑表格
如果你的目标是“看起来像表格”的灵活布局（比如卡片网格、仪表盘区域），直接用 HTML 表格 + colgroup 反而吃力不讨好。现代方案是用语义化容器（如 div）配合 CSS Grid，通过 grid-template-areas 或 grid-column 显式声明区域关系。好处是列宽、间距、断点切换全由 CSS 控制，不用改 HTML 结构。
- 表格适合行列关系明确、需屏幕阅读器逐单元格朗读的数据场景
- Grid 适合视觉分组、拖拽重排、移动端折叠等交互需求
- 真要兼顾两者，可以用
display: grid但保留table语义标签（需额外 ARIA 属性补全），不过复杂度陡增，一般项目没必要
colgroup 的样式能力极其有限，而 thead/tbody 的顺序错误会导致可访问性失效**。这两点不解决，再多的视觉技巧都只是表面功夫。
