一、语义化差异
| 元素 | 语义 | 适用场景 |
|---|---|---|
<div> |
无明确语义（通用容器） | 布局容器、样式分组、配合CSS/JS实现动态效果 |
<table> |
明确表示表格数据结构 | 展示行列关系明确的表格数据（如财务报表、课程表等） |
关键区别：
<table>具有强语义，屏幕阅读器会按表格关系解析内容，而<div>需要手动添加ARIA角色（如role="table"）才能实现类似效果。- 滥用
<table>布局会导致语义污染，影响SEO和可访问性。
二、布局能力对比
| 特性 | <div> + CSS |
<table> |
|---|---|---|
| 布局方式 | 灵活（Flexbox/Grid/定位） | 固定行列结构 |
| 响应式适配 | 易于适配移动端（媒体查询、流式布局） | 需复杂处理（如隐藏列、横向滚动） |
| 对齐控制 | 依赖CSS（text-align/vertical-align） |
原生支持行列对齐（align/valign属性） |
| 动态内容 | 高度灵活（通过JS增删节点） | 结构复杂时操作困难（需维护行列关系） |
示例代码对比：
<!-- div + Flexbox 布局 -->
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
<!-- table 布局 -->
<table>
<tr>
<td>Item 1</td>
<td>Item 2</td>
</tr>
</table>
三、性能与渲染
渲染性能
<table>：浏览器需先解析完整表格结构再渲染，嵌套复杂时性能较低。<div>：流式渲染，结合CSS可实现渐进式加载。
代码体积
<table>需要<tr>、<td>等多层嵌套标签，代码冗余度高。<div>通过CSS可大幅减少标签数量（如用display: grid替代表格结构）。
四、可访问性（A11Y）
| 场景 | <div> |
<table> |
|---|---|---|
| 屏幕阅读器解析 | 需手动添加role和aria-*属性 |
自动识别行列关系，支持表格导航快捷键 |
| 键盘导航 | 需额外开发焦点管理逻辑 | 原生支持方向键导航 |
| 复杂数据展示 | 需依赖CSS实现表格效果（如边框、斑马纹） | 原生支持表头（<th>）、跨行跨列（rowspan/colspan） |
五、现代开发实践
优先使用
<div>的场景- 整体页面布局（Header/Sidebar/Content）
- 动态内容（如卡片列表、轮播图）
- 响应式设计需求
必须使用
<table>的场景- 展示具有严格行列关系的结构化数据（如Excel式报表）
- 需要打印的表格内容（浏览器对表格的打印支持更友好）
折中方案
使用CSS的display: table系列属性，既保留语义又获得布局灵活性：.table-like { display: table; } .row { display: table-row; } .cell { display: table-cell; }
六、总结建议
| 对比维度 | 推荐选择 |
|---|---|
| 布局容器 | <div> + CSS Grid/Flexbox |
| 数据表格 | <table> |
| 快速原型 | <table>（简单对齐场景） |
| 语义化要求 | 严格遵循标签原始语义 |
最终原则：
根据内容语义选择标签，而非视觉效果。布局应通过CSS实现，<table>仅用于数据展示。