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