应避免在非数据场景使用table标签，如布局排版、用户资料展示或卡片排列，因其导致语义不清、影响可访问性和SEO；推荐用div结合Flexbox或Grid实现布局，用section、article、header等语义标签划分结构，表单类信息可用dl定义列表组织“标题-值”对；仅在呈现二维数据时保留table，并配合caption、thead、tbody、th[scope]等增强语义与可访问性；核心是根据内容本质区分数据与布局，选择恰当标签。
HTML传统表格（table）适合展示行列数据，但在非数据场景中滥用会导致语义不清、影响可访问性和SEO。当不需要呈现二维数据时，应使用更语义化的结构替代传统表格。
何时该避免使用table标签
如果内容不是真正的数据表格（如价格表、课程表、统计报表），比如用于布局排版或展示关联信息，使用table就违背了语义化原则。屏幕阅读器难以理解这类用法，维护也更困难。
- 用表格做页面布局（如头部、侧栏、底部排列）
- 展示一组相关的但非行列结构的信息（如用户资料）
- 卡片式内容排列（如产品列表）
使用语义化标签替代表格布局
现代HTML提供丰富的语义标签和CSS布局方式，完全可以替代非数据型表格。
- 用div + CSS Flexbox 或 Grid 实现灵活布局
- 使用section、article、header等标签明确内容区块含义
- 对于表单类信息展示，可用dl（定义列表）组织“标题-值”对
例如展示用户信息：
立即学习“前端免费学习笔记（深入）”；
<dl> <dt>姓名</dt> <dd>张三</dd> <dt>邮箱</dt> <dd>zhangsan@example.com</dd> </dl>
这种方式比两列表格更具语义，也更容易被辅助技术识别。
保留table用于真正数据表格
当确实需要表达二维关系数据时，table仍是正确选择。关键是增强其语义性。
- 用caption提供表格标题
- 用thead、tbody、tfoot划分结构
- 用th标注行/列表头，并加scope属性说明范围
- 必要时配合aria-labelledby提升可访问性
这样既保持语义清晰，又支持各类设备正确解析。
基本上就这些。关键在于区分内容本质：是数据还是布局？根据意图选择合适标签，才是真正的语义化思维。
