HTML表格需规范缩进（子标签比父标签多一层）、语义化标签正确使用（如th仅用于表头且置于thead内）、class命名绑定语义与作用域（如pricing-table）、响应式时用data-label保持字段可读性。
缩进与换行怎么设才不混乱
HTML表格嵌套层级多，<table> 里套 <thead>、<tbody>、<tr>、<th>/<td>，不规范缩进会直接导致结构错乱、调试困难。
关键不是“要不要缩进”，而是缩进是否反映真实嵌套关系：
- 每个子标签必须比父标签多缩进一层（推荐 2 或 4 个空格，全项目统一）
-
<tr>和它的所有<th>/<td>必须对齐在同一缩进层级 - 避免把多个
<td>写在同一行——哪怕内容很短，也各自独占一行 -
<caption>、<colgroup>这类顶层子元素，和<thead>、<tbody>并列，不能缩进到<table>内部再缩一层
语义化标签用错会导致什么问题
把 <th> 当 <td> 用，或漏掉 <thead>，表面看页面能渲染，但实际埋下三类隐患：屏幕阅读器无法识别表头、CSS 选择器失效、后续加 scope 或 headers 属性时逻辑错位。
真正该检查的点：
立即学习“前端免费学习笔记（深入）”；
-
<th>只用于表头单元格，且必须出现在<thead>或<tr>的首列（当用作行标题时需加scope="row"） -
<caption>必须紧跟在<table>开始标签之后，不可放在<thead>里面 - 多级分组表格中，别用
<th colspan="n">充当分组标题——应改用<h3>包裹在<tr>内，并配id供headers引用 - 每张表至少有一个
<tbody>，哪怕只有一行数据；空表也要保留结构，不要删掉
class 命名怎么避免后期改不动
写 class="table-1" 或 class="blue-border" 看似省事，等加第二张风格类似的表时就卡住：是复用？还是复制粘贴再改名？很快变成一堆无法归类的 class。
务实做法是绑定语义+作用域：
- 用 kebab-case，如
class="pricing-table"、class="user-list-table"，而不是class="table-pricing" - 避免纯样式名（
blue、big），改用功能描述，如class="sortable-header"、class="expandable-row" - 复杂表格可配合 BEM：主容器
class="data-grid"，表头单元格class="data-grid__header"，操作列class="data-grid__action-col" - 所有 class 都应在 CSS 中有明确声明——没用到的 class 别留在 HTML 里
响应式表格里最容易被忽略的细节
加 overflow-x: auto 让小屏横向滚动，只是最低限度处理。真正在意可读性的人，会立刻发现：滚动时表头消失、数据列和表头对不上、屏幕阅读器完全无法理解“这列对应哪个字段”。
必须同步做的几件事：
- 给每个
<td>加data-label属性，值等于对应<th>的文本，例如<td data-label="姓名">张三</td> - 用
@media把<tr>改成display: block，再让<td>变成display: list-item，配合:before显示data-label - 禁用
border-collapse: collapse在移动端——它会让伪元素定位失准 - 如果表格含交互（排序、展开），确保
data-label值在 JS 操作后仍准确，不要靠 DOM 文本动态提取
表格结构越深，data-label 和 headers 的一致性越关键；一旦错位，辅助技术用户看到的就是一串无上下文的数值。
