問題描述

在剛接觸html的時候，從某地方看到說html的table標簽非常重型，會降低性能，最好不用。(國內某大型在線教育平臺官推的課程的老師， 絕對說過 我還記了筆記...)

于是這句話被當時自己深深記在腦海。能用p的地方全用p

現在我特別想知道，html的table到底重在哪里了？ 把table換成p，什么都用p，這難道不是嚴重違反了html語義化嗎？

感覺怎么做都是在給自己挖坑啊...

問題解答

來來；我來解開你這個心結；

table；這個主要是遠古時代用來布局的標簽了；對seo不是很友好；現代html已經想對復雜多了；拿table布局遠沒有p靈活；比如說float、position;

但是呢；在展示比較規范的表格類型的數據的時候；table的對齊是相當的方便啊；table還是有存在的位置的；

結論來了；畫重點；首先；語義化可不是讓你把所有的table換成p就完了的；而是要使用 header 、nav 、footer 這些標簽；

其次；在比較重seo的頁面；比如說文章之類的；不用table是正確的；

最后；table還是可以用的；一般是用在管理后臺或者個人中心這類不需要seo、數據又比較規范，結構簡單的地方；不信；你打開你的淘寶京東的個人中心；看下訂單；是不是都是table？

從<<webkit技術內幕>>這本書中能看到一個比較重要的信息

瀏覽器對于table實現布局是經過了多次重繪重排最后生成的table

重排非常損耗瀏覽器性能

而瀏覽器的重排是在瀏覽器性能優化中是要盡可能的去避免的,所以目前主流的布局都已經放棄了table,采用其他的標簽進行替代,不過在后臺管理頁面中table依然經常使用,所以衡量是否該使用主要看場合

PS:如果樓主有比較差的安卓手機的話可以去試著打開一些帶有表格的郵件,樓主就可以親眼看到一個table表格是在手機上多次重排重繪的慢動作了

https://feclub.cn/post/conten... 這里是 關于 重排 重繪 和高頻DOME 操作對性能的 消耗 ， 個人覺得 還不錯

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

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

這里的“重”應該是指標簽臃腫吧？畢竟<p>一套標簽對比<table><tr><td>三套，代碼量上去了不說看起來也比較懵逼；但這倆標簽終歸有各自的適用場景，完全扔掉table去寫p不一定就是最好的，標簽語義化才是王道~

標簽語義化 該用的時候還是得用。

如上面大佬所講，table的重，主要是體現在了重繪方面，這一點被大多數前人所重視，是因為在04年之前用的還都是table布局，04年之后，p+css布局興起，fee也意識到了table的重，所以這個才經常被吐槽；至于什么時候用，table在做純表格的時候比起用p+css模擬表格還是有一定優勢的