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

Question

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

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

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

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

Answer 1

Come on; let me untie this knot in your heart;

table; this is mainly a tag used for layout in ancient times;
is not very friendly to SEO;
modern HTML is already much more complicated;
using table layout is far less flexible than p; for example Say float, position;

But what?
When displaying more standardized table-type data;
table alignment is quite convenient;
table still has its place;

The conclusion is here; highlight the key points;
First of all; semantics does not mean that you just replace all tables with p;
but uses header, nav, footer tags;

Secondly; on pages that focus on SEO; such as articles;
It is correct not to use tables;

Finally; tables can still be used; they are generally used in management backends or personal centers where SEO is not required, the data is relatively standardized, and the structure is simple;
If you don’t believe it; you can open your Taobao JD.com personal center ; Check the order; are they all tables?

Answer 2

From the book <<WebKit Technology Insider>> we can see a more important information

The browser’s implementation of table layout is the final generated table after multiple redraws and rearrangements

Reflow is very harmful to browser performance

Browser rearrangement should be avoided as much as possible in browser performance optimization, so the current mainstream layouts have abandoned tables and replaced them with other tags. However, in the background management page, table I still use it frequently, so whether I should use it depends on the occasion

PS: If the poster has a relatively poor Android phone, you can try to open some emails with tables. The poster can see with his own eyes that a table is rearranged and redrawn multiple times in slow motion on the phone

Answer 3

https://feclub.cn/post/conten... Here is about the performance consumption of reflow, redraw and high-frequency DOME operations. I personally think it is pretty good

Answer 4

I also want to ask where the weight of the table is.

Answer 5

I understand what he means by "heavy" is more about inflexibility

Answer 6

The "heavy" here should mean the label is bloated, right? After all, one set of <p> tags compared to three sets of <table><tr><td> would look a bit confusing not to mention the amount of code. However, these two tags have their own applicable scenarios. It is not necessarily the best to completely abandon the table and write p. Yes, tag semantics is the way to go~

Answer 7

Tag semantics should still be used when they should be used.

Answer 8

As the boss said above, the importance of table is mainly reflected in redrawing. This is valued by most predecessors because before 2004, the table layout was still used. After 2004 With the rise of p+css layout, fees have also realized the importance of table, so this is often criticized; as for when to use it, table still has certain advantages when making pure tables compared to using p+css to simulate tables