cellpadding和cellspacing已过时，应改用CSS的padding和border-spacing；二者均无法单独控制行列或单元格，且易被CSS覆盖，HTML5中列为obsolete属性。
HTML表格标签没那么复杂，但属性容易混用、过时或被误认为“必须写”——实际开发中，border、cellpadding、cellspacing 这三个属性几乎不该再出现在新代码里。
哪些表格标签是必须掌握的核心结构
真正构成语义化表格骨架的只有 6 个标签，其余都是可选增强。重点不是记住全部，而是知道什么时候该用哪个：
-
<table>：整个表格容器，所有其他表格标签必须嵌套其中 -
<thead>、<tbody>、<tfoot>：分别包裹表头行、主体行、页脚行；<tbody>可省略，但显式写出有利于 JS 操作和可访问性 -
<tr>：只表示“一行”，不区分数据或标题；它必须在<thead>/<tbody>内，不能直接放在<table>下（HTML5 允许，但会触发解析纠错） -
<th>和<td>：唯一能放内容的单元格标签；<th>默认有scope属性语义（列/行），对屏幕阅读器关键
哪些 HTML 属性还在用，哪些早该丢掉
HTML4 那套内联样式属性在现代项目中基本失效，浏览器虽仍支持，但行为不一致、不可继承、无法响应式。关键判断标准是：是否影响语义或布局逻辑？
- 还能用（但建议优先 CSS）：
colspan、rowspan—— 它们改变表格结构，CSS 无法替代 - 已废弃且危险：
cellpadding、cellspacing、align、bgcolor、summary—— W3C 明确标记为过时，部分在严格模式下被忽略 - 边缘可用：
border（仅当设为"1"时渲染简单边框），但值为"0"不等于无边框，而是“关闭边框合并”，反而可能让<td>边框意外显示
例如：<table border="1"> 渲染效果 ≈ table { border-collapse: collapse; border: 1px solid currentColor; }，但后者可控、可继承、可 media 查询。
立即学习“前端免费学习笔记（深入）”；
移动端表格常见崩坏点与修复方式
表格在小屏上最常出问题的不是样式，而是结构本身——没有语义分组、缺少响应式断点、th 缺失 scope 导致读屏器混乱：
- 横向滚动不是最佳解：给
<table>包一层<div style="overflow-x: auto">能临时撑开，但用户无法双指缩放或局部拖拽 - 真正的响应式方案是用
@media+display: block把<tr>改成垂直堆叠，配合<th>的data-label注入列名（如<td data-label="城市">北京</td>） -
<caption>必须存在且非空：它不仅是标题，更是表格的无障碍名称（aria-labelledby的默认 fallback） - 避免在
<td>里塞<div>或<p>：会破坏表格的固有盒模型，尤其在 flex/grid 布局中引发高度塌陷
为什么 colgroup 和 col 容易被忽略却很关键
很多人以为列控制只能靠 CSS 的 nth-child，但 <colgroup> 提供的是原生、轻量、可继承的列级样式锚点，尤其适合固定列宽、统一背景色、设置 width 百分比等场景：
-
<col span="2">比写两个<col>更简洁，且语义明确表示“接下来两列共享配置” -
<col>上的width属性（如width="20%"）是唯一能在 HTML 层面定义列宽比例的方式，CSS 的width对<col>无效 - 注意：
<col>不接受class或内联style，所有样式必须通过父级<colgroup>或外部 CSS 的col:nth-child()控制 - 一个常见错误是把
<colgroup>放在<tbody>后面——它必须紧贴<table>开始，否则浏览器会自动移到开头，导致样式错位
结构越清晰，后期加筛选、导出、虚拟滚动就越少踩坑。表格不是“先写完再修”，而是从第一行 <tr> 就得想好语义和扩展路径。
