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