Use of table layout display:tables in CSS2

First look at display: table the compatibility:

You can see that unless you have to contend with IE6/7, display:table need not consider compatibility.

Next look at the display optional values for table:

• table: Specifies that the object is a table of block element level , equivalent to the HTML tag<table>

• inline-table: Specifies the object as an inline element-level table, equivalent to the HTML tag<table>

• table-caption: Specifies the object as the table caption , which is equivalent to the HTML tag<caption>

• table-cell: Specify object as table cell , equivalent to HTML tag<td>

• table-row: Specify Object as table row, equivalent to HTML tag<tr>

• table-row-group: Specify Object as Table row group, equivalent to HTML tag<tbody>

• table-column: Specifies the object as a table column, which is equivalent to the HTML tag<col>

• table-column-group: Specifies that the object is displayed as a table column group, which is equivalent to the HTML tag<colgroup>

• table-header-group: Specifies the object as the table header group, which is equivalent to the HTML tag<thead>

• table-footer-group: Specify Object as Table footer Group, equivalent to HTML tag<tfoot>

There are also some assistance attributes:

• border-collpase: Used to determine whether the border of a table is separate or merged. In delimited mode, adjacent cells have separate borders. In merge mode, adjacent cells share borders.
• border-spacing: Specifies the distance between adjacent cell borders (for border separation mode only). is equivalent to the CellSpacing property in HTML, but the second optional value can be used to set the vertical spacing that differs from the horizontal spacing.
• table-layout: Defines the algorithm used to layout table cells, rows, and columns. (Auto: The width of the table and cell depends on what it contains.) Fixed: The width of the table and column is set by the width of the table, and the width of a column is determined only by the cell in the first row of the column. ）
• vertical-align: Used to specify the vertical alignment of inline elements (inline) or table cell (Table-cell) elements.

Here are four examples:

Common CSS:

/*CSS Table*/. Table{Display:Table;}. table-fixed{Table-layout:fixed;}. Table-row{Display:Table-row;}. Table-cell{Display:Table-cell;}. Table-colgroup{Display:Table-column-group;}. Table-caption{Display:table-caption;}. Table-col{Display:Table-column;}. Table-body{Display:Table-row-group;}. Table-header{Display:Table-header-group;}. Table-footer{Display:Table-footer-group;}. TABLE-VT{vertical-align:Top;}. TABLE-VM{vertical-align:Middle;}. Table-vb{vertical-align:Bottom;}/*CSS Table*/Html,body{Height:100%;margin:0;padding:0;background:#333;}. Box1{background:#6D5CAE;}. Box2{background:#48B0F7;}. Box3{background:#10CFBD;}H3{Padding-left:20px;Color:#fff;}

1. Responsive layout

Html:

1 <H3>Responsive layout</H3>2 <Divclass= "Table Demo1">3   　  <Divclass= "Box1 Table-cell">1</Div>4  　　 <Divclass= "Box2 Table-cell">2</Div>5  　　 <Divclass= "Box3 Table-cell">3</Div>6 </Div>

Css:

{    width: 100%;     height: 200px;}

Effect:

2. Fill the remaining space automatically

Html:

1 <H3>Automatically fills the remaining space</H3>2 <Divclass= "Table Demo2">3     <Divclass= "Table-header-group">Table Header</Div>4     <Divclass= "Main Table-row">Automatically fills the remaining space</Div>5     <Divclass= "Table-footer-group">Table Footer</Div>6 </Div>

Css:

. Demo2{width:400px;Height:300px;}. Demo2 Div.table-header-group{padding:5px 20px;background:#10CFBD;}. Demo2. Main{Height:100%;background:#48B0F7;}. Demo2 Div.table-footer-group{padding:5px 20px;background:#10CFBD;}

Effect:

3. Dynamic Vertical Center Alignment

Html:

1 <H3>Dynamic Vertical Center Alignment</H3>2 <Divclass= "Table Demo3">3     <Divclass= "Table-cell table-vm">4         <Divclass= "Center-box">123</Div>5     </Div>6 </Div>

Css:

{    width: 400px;     height: 300px;     background: #10CFBD;}  {    width: 100px;     Height: 100px;     background: #6D5CAE;     display: inline-block;}

Effect:

4. Dynamic Horizontal Center Alignment

Html:

1 <H3>Dynamic Horizontal Center Alignment</H3>2 <Divclass= "Table Demo4">3     <Divclass= "Center-box">123</Div>4 </Div>

Css:

{    width: 400px;     height: 300px;     background: #10CFBD;     text-align: center;}  {    width: 100px;     Height: 100px;     background: #6D5CAE;     display: inline-block;}

Effect:

Use of table layout display:tables in CSS2