html5 - html table标签到底重在哪里？该不该用？

Question

在刚接触html的时候，从某地方看到说html的table标签非常重型，会降低性能，最好不用。
(国内某大型在线教育平台官推的课程的老师， 绝对说过 我还记了笔记...)

于是这句话被当时自己深深记在脑海。能用p的地方全用p

现在我特别想知道，html的table到底重在哪里了？ 把table换成p，什么都用p，这难道不是严重违反了html语义化吗？

感觉怎么做都是在给自己挖坑啊...

Answer 1

来来；我来解开你这个心结；

table；这个主要是远古时代用来布局的标签了；
对seo不是很友好；
现代html已经想对复杂多了；
拿table布局远没有p灵活；比如说float、position;

但是呢；
在展示比较规范的表格类型的数据的时候；
table的对齐是相当的方便啊；
table还是有存在的位置的；

结论来了；画重点；
首先；语义化可不是让你把所有的table换成p就完了的；
而是要使用 header 、nav 、footer 这些标签；

其次；在比较重seo的页面；比如说文章之类的；
不用table是正确的；

最后；table还是可以用的；一般是用在管理后台或者个人中心这类不需要seo、数据又比较规范，结构简单的地方；
不信；你打开你的淘宝京东的个人中心；看下订单；是不是都是table？

Answer 2

从<<webkit技术内幕>>这本书中能看到一个比较重要的信息

浏览器对于table实现布局是经过了多次重绘重排最后生成的table

重排非常损耗浏览器性能

而浏览器的重排是在浏览器性能优化中是要尽可能的去避免的,所以目前主流的布局都已经放弃了table,采用其他的标签进行替代,不过在后台管理页面中table依然经常使用,所以衡量是否该使用主要看场合

PS:如果楼主有比较差的安卓手机的话可以去试着打开一些带有表格的邮件,楼主就可以亲眼看到一个table表格是在手机上多次重排重绘的慢动作了

Answer 3

https://feclub.cn/post/conten... 这里是 关于 重排 重绘 和高频DOME 操作对性能的 消耗 ， 个人觉得 还不错

Answer 4

我也想问问table到底重哪里了。

Answer 5

我理解其所说的“重”， 更多的是指不灵活

Answer 6

这里的“重”应该是指标签臃肿吧？毕竟<p>一套标签对比<table><tr><td>三套，代码量上去了不说看起来也比较懵逼；但这俩标签终归有各自的适用场景，完全扔掉table去写p不一定就是最好的，标签语义化才是王道~

Answer 7

标签语义化 该用的时候还是得用。

Answer 8

如上面大佬所讲，table的重，主要是体现在了重绘方面，这一点被大多数前人所重视，是因为在04年之前用的还都是table布局，04年之后，p+css布局兴起，fee也意识到了table的重，所以这个才经常被吐槽；至于什么时候用，table在做纯表格的时候比起用p+css模拟表格还是有一定优势的