div+css 布局相比 table 的优点

问题

div+css 的布局较 table 布局有什么优点？

解答

代码对比

table 布局实现两栏布局：

<table width="100%">
  <tr>
    <td width="200px" bgcolor="#f0f0f0">侧边栏</td>
    <td bgcolor="#fff">主内容区</td>
  </tr>
</table>

div+css 实现同样效果：

<div class="container">
  <div class="sidebar">侧边栏</div>
  <div class="main">主内容区</div>
</div>

<style>
.container {
  display: flex;
}
.sidebar {
  width: 200px;
  background: #f0f0f0;
}
.main {
  flex: 1;
  background: #fff;
}
</style>

主要优点

1. 结构与样式分离

div+css 将内容结构（HTML）和视觉表现（CSS）分开，便于维护和修改。改变样式只需修改 CSS，无需动 HTML。

2. 代码量更少，加载更快

<!-- table 布局嵌套多，代码冗余 -->
<table>
  <tr>
    <td>
      <table>
        <tr><td>...</td></tr>
      </table>
    </td>
  </tr>
</table>

<!-- div+css 结构简洁 -->
<div class="box">...</div>

3. SEO 更友好

搜索引擎爬虫更容易理解语义化的 div 结构，table 嵌套会稀释关键内容的权重。

4. 响应式布局更容易

/* 通过媒体查询轻松实现响应式 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
  }
}

table 布局难以实现响应式，需要大量 hack。

5. 渲染性能更好

• table 必须等所有内容加载完才能渲染（需要计算所有单元格宽度）
• div 可以边加载边渲染，用户体验更好

6. 可访问性更好

屏幕阅读器对语义化标签支持更好，table 用于布局会干扰辅助设备对真正表格数据的识别。

关键点

• 分离关注点：HTML 负责结构，CSS 负责样式，职责清晰
• 性能优势：代码量少、渲染快、不阻塞页面显示
• 维护成本低：改样式不动结构，支持样式复用
• 适应性强：轻松实现响应式布局和多端适配
• 语义化：对 SEO 和无障碍访问更友好