HTML表格必须严格遵循嵌套结构与语义规范：table需包裹tr，tr内至少含th或td；thead/tbody/tfoot为语义刚需；colspan/rowspan须精准声明合并逻辑；border/cellpadding等过时属性须由CSS替代；scope属性是可访问性底线。
HTML 表格不是“写完就能用”的元素，结构错一层、属性混一回，轻则样式崩、重则语义失效、屏幕阅读器读错——<table> 的骨架必须严丝合缝，属性要用对地方，不能靠“看着差不多”。
<h3>table/tr/th/td 这四个标签缺一不可</h3>
<p>浏览器只认嵌套合法性，不认教程逻辑。一个能被正确解析的表格，至少要满足：<code><table> 包住 <code><tr>，每个 <code><tr> 里至少有一个 <code><th> 或 <code><td>。
<ul><li><code><th> 只能用于表头（列名或行名），默认加粗+居中；别为了样式好看把数据单元格写成 <code><th>
<li>空表格（比如加载中）不能留空 <code><table>，得塞个占位行：<code><tr><td>暂无数据</td></tr>，否则某些老浏览器会直接忽略整个 <table><li>
<code><caption></caption> 是表格唯一的合法标题，必须紧贴 <table> 开始后第一行；用 <code><h3></h3> 堆在上面，SEO 和无障碍支持都会打折
thead/tbody/tfoot 是语义刚需，不是可选项
不用 <thead>、<code><tbody>、<code><tfoot> 不影响渲染，但会让 JS 操作、CSS 定位、屏幕阅读器导航全部变脆弱。现代框架和辅助技术都依赖这三层划分。
<ul><li><code><thead> 必须只放表头行（<code><tr> 里全是 <code><th>），且建议只有一行；多行表头需用 <code>scope 或 headers 显式关联
<tbody> 是数据主区，JS 动态增删行时，只操作它内部的 <code><tr>，避免误触表头或脚注
<li><code><tfoot> 要写在 <code><tbody> 之前（HTML 顺序），浏览器会自动渲染到底部；这对长表格滚动时固定脚注很关键
<h3>colspan/rowspan 合并单元格的三个铁律</h3>
<p>合并不是排版技巧，是语义声明。写错一个值，整行列数就乱，后续所有 CSS 选择器、JS <code>querySelectorAll('td') 都可能漏项或错位。
立即学习“前端免费学习笔记（深入）”；
-
colspan="3"表示“横跨 3 列”，对应逻辑列数减 2；rowspan="2"表示“纵跨 2 行”，下一行同位置必须留空（不能补<td>） <li>合并后，被覆盖的单元格不能显式存在。例如某行写了 <code><td colspan="2">A</td> <td>B</td>，这行实际只有 2 个逻辑单元格，但 DOM 中有 3 个<td> 节点——浏览器会自动补一列，导致列对齐全崩 <li>动态生成表格时（如 Vue/React 渲染），务必先算清每行总列数是否一致；用 <code>rowspan+ Flex/Grid 混合布局，在 Safari 中极易触发重排冲突 - 边框统一用：
border-collapse: collapse+border控制线型，border-spacing: 0替代cellspacing - 内边距统一用：
td, th { padding: 8px 12px }，别再用cellpadding - 对齐和宽度全部走 CSS：
text-align、width、max-width；width="100%"这类写法已无法响应式适配 - 斑马纹用：
tbody tr:nth-child(even) { background: #f9f9f9 }，比写 class 更可靠
CSS 替代 border/cellpadding/cellspacing 是硬性要求
HTML 属性 border、cellpadding、cellspacing 在 2026 年已完全过时，不仅语义不清，还和现代 CSS 冲突。
最常被忽略的其实是 scope 属性——哪怕只是简单两列表格，给 <th scope="col"> 加上，就能让屏幕阅读器准确说出“姓名列：张三”，而不是“第1行第1列：张三”。这不是加分项，是基础可访问性底线。</th>
