Display: the advantages of table: vertical center, floating ......, Display

Display: the advantages of table: vertical center, floating ......, Display

1. Why not use table elements?

Currently, in most development environments, table elements are basically no longer used for webpage layout. Instead, div + css is used. Why not use table as a table element?

1. The number of k Files written with DIV + CSS is smaller than that written with table. Do not believe that you can add 1000 tables and 1000 div buckets on the page to see which file is large

2. the table must be displayed after the page is fully loaded. Before loading is complete, the table is blank. That is to say, the page is displayed after the page is complete, and the div is displayed row by row, you do not need to load the page completely.

3. Non-table content is loaded with tables, which does not meet the semantic requirements of tags and is not conducive to SEO.

4. table Nesting is too large. DIV code is concise.

......

 

2. What should I do if I want to layout a table?

There are many advantages, but some projects need a layout similar to the table. What should I do? You can use display: table to solve the problem.

The display: table series correspond almost to the elements of the table series. See the following table:

Table	(Similar to <table>) This element is displayed as a block-level table with a line break 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 group of one or more rows.
Table-header-group	(Similar to <thead>) This element is displayed as a group of one or more rows.
Table-footer-group	(Similar to <tfoot>) This element is displayed as a group 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 group of one or more columns.
Table-column	(Similar to <col>) This element is displayed as a cell column.
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 title.

Currently, display: table is widely used. When Google Maps search for routes, the details of the routes on the left are implemented using display: table.

 

3. How to Use display: table?

<! DOCTYPE html> 
Therefore, we can use the display: table series to do some common layout design.
1. Let the block-level labels achieve intra-row effects, that is, floating to the same horizontal axis
<! DOCTYPE html> 
2. Vertical center
 
<! DOCTYPE html> 
} </Style> <div class = "table"> <div class = "cell"> content content content content content </div> </body> 

 
Today, there are so many new wonderful uses to continue to be supplemented.