最稳妥的语义化表格写法是用结构，必须为每个添加scope属性（col或row），强制使用关联标题，禁用过时html属性而改用css控制样式，避免跨区域合并单元格以保障可访问性。
直接用 <table> + <code><thead> + <code><tbody> 是最稳妥的语义化做法，别试图用 <code><div> 模拟表格来“炫技”——可访问性、打印、屏幕阅读器都会出问题。
<h3>必须用 <code><th> 定义列头，且加 <code>scope="col"
很多人只写 <th>姓名</th>，但没加 scope。这会导致屏幕阅读器无法判断该表头对应哪一列，读出来就是“姓名，空白，空白……”而不是“姓名 张三，姓名 李四”。
正确写法是：<th scope="col">姓名</th>。
如果第一列是行标题（比如“张三”“李四”在最左列），那这一列的 <th> 应设 <code>scope="row"。
要点：
-
scope必须出现在每个<th> 上，不能只加在第一行 <li>不要混用 <code>scope="col"和headers—— 后者适合复杂嵌套表头，普通用户信息表没必要 - 浏览器兼容性无压力，所有现代浏览器和主流读屏器（NVDA、VoiceOver）都支持
- 它不参与表格布局计算，不影响
colspan或渲染逻辑 - 搜索引擎和无障碍检测工具（如 axe）会检查它是否存在
<caption></caption> 不是可选项，是可访问性刚需
很多开发者把标题写在 <table> 外面，比如 <code><h2>用户信息表</h2>
<table>...。这样屏幕阅读器不会把它和表格关联起来，用户可能根本不知道这是张什么表。<br>必须用 <code><caption></caption>，且紧贴 <table> 开始标签后：<br><code><table>
<caption>注册用户基本信息</caption>
<thead>...<br>注意：
<ul>
<li>
<code><caption></caption> 默认居中显示在表格上方，如需左对齐可用 CSS：caption { text-align: left; }
避免用 border、cellpadding 等过时属性
HTML5 已废弃 border、cellpadding、cellspacing 这类 presentational 属性。硬写进去虽然还能显示，但会干扰 CSS 控制，也通不过 W3C 验证。
改用 CSS：
- 边框统一用
border-collapse: collapse+border设置在table, th, td上 - 内边距用
th, td { padding: 8px 12px; }，别碰cellpadding - 单元格间距靠
border-spacing（配合border-collapse: separate），但多数场景直接用collapse更干净 - 响应式要考虑：小屏下用
display: block; overflow-x: auto;包裹<table>，否则横向溢出 <h3> <code>colspan和rowspan要谨慎，尤其别跨<thead>/</thead> <tbody> <p>用户信息表里最常见的错误，是用 <code>colspan="3"让某行标题横跨全部列，却忘了它实际破坏了行列映射关系。比如：<thead> <tr><th colspan="3">基本信息</th></tr> <tr> <th>姓名</th> <th>邮箱</th> <th>电话</th> </tr> </thead>
这段代码会让屏幕阅读器困惑：“基本信息”到底管哪几列？它和下面三个
<th> 的归属关系断裂。<br>更安全的做法是去掉首行合并，或改用 <code><caption></caption>+ 分组标题（如<h3></h3>放在<table> 外）；真要用 <code>colspan，确保后续每行单元格总数仍对齐，且所有<th> 保持 <code>scope准确。最易被忽略的是：表格结构一旦含
rowspan或跨多层colspan，aria-labelledby或headers就很难补救——不如从源头避免复杂合并，用 CSS Grid 做展示层布局，让<table> 只负责纯数据语义。</table>
