CSS Table layout

There are two ways of table layout:

1.HTML Table ( <table> label) and 2. CSS Table ( display:table and other related properties).

HTML table refers to the use of native <table> tags, while CSS table refers to the model that mimics HTML tables with CSS properties.

The correspondence between the two is roughly as follows:

2. Table { display: table }
4. TR { display: table-row }
6. Thead { display: table-Header-group }
8. Tbody { display: table-Row-group }
10. Tfoot { display: table-footer-group }
12. Col { display: table-column }
14. Colgroup { display: table-column-group }
16. TD, th { display: table-cell }
18. Caption { display: table-caption }

L Use the attributes listed above to facilitate many functions:

such as: block element Vertical center:Display:table-cell; Vertical-align:middle; There have been special generalizations about the centering of elements.

CSS Table layout