1. Why not use table elements?
At present, in most development environments, table elements are basically not used for web page layout. Instead, div+css is used, so why not use table elements?
1. The number of k files written with DIV+CSS is smaller than that written with table. If you don’t believe me, put 1000 tables and 1000 divs in the page and see which file is larger.
2. The table must be displayed after the page is fully loaded. Before the page is fully loaded, the table is blank, that is to say, it needs to be displayed after the page is completed, while the div is displayed line by line. It can be loaded while the page is not fully loaded. side display
3. The non-table content is installed in table, which does not meet the requirements of label semantics and is not conducive to SEO
4. There is too much nesting of tables, so using DIV code will be more concise
2. But what if I want the layout of a table?
There are many benefits, but what if a table-like layout is required in some projects? It can be solved with display:table
The display:table series almost corresponds to the elements of the table series, please see the following table:
| table | (Similar to <table>) This element is displayed as a block-level table with line breaks before and after the table. |
| inline-table | (Similar to <table>) This element is displayed as an inline table without line breaks before and after the table. |
| table-row-group | (Similar to <tbody>) This element is displayed as a grouping of one or more lines. |
| table-header-group | (Similar to <thead>) This element is displayed as a grouping of one or more lines. |
| table-footer-group | (Similar to <tfoot>) This element is displayed as a grouping of one or more rows. |
| table-row | (Similar to <tr>) This element is displayed as a table row. |
| table-column-group | (Similar to <colgroup>) This element is displayed as a grouping of one or more columns. |
| table-column | (Similar to <col>) This element is displayed as a column of cells. |
| table-cell | (Similar to <td> and <th>) This element is displayed as a table cell. |
| table-caption | (Similar to <caption>) This element is displayed as a table caption. |
The "display:table;" CSS declaration makes an HTML element and its children behave like a table element. Using table-based CSS layout allows us to easily define a cell's borders, backgrounds, etc., without the semantic problems caused by the use of tabs like table.