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

分离、方便改版、快、清晰简洁、利于 SEO。

table 布局的优缺点

缺点

  1. table 比其他 html 标签占更多的字节，造成下载时间延迟，占用服务器更多的流量资源（代码冗余）。
  2. table 会阻挡浏览器渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
  3. 灵活性差，一旦设计确定，后期很难通过 CSS 让它展现新的面貌。
  4. 不利于搜索引擎抓取信息，直接影响到网站的排名。

优点

  1. 兼容性好。
  2. 容易上手。

补充

补充：table 布局的年代，页面就是一张"画"，div+css 布局的年代，页面是一份"可重排的数据"。

一句话核心

table 用"行和列"硬切版面，div+css 用"内容 + 样式"分离的方式排版，前者改动样式要改结构，后者只动样式不动结构。

现代做法

  • 推荐 <table> 只用于真正的表格数据
  • 布局交给 flex / grid + 语义化标签
  • 即使做"表格状布局"，也用 CSS 模拟而不是直接用 <table>

来源整理自：我的有道云笔记