Table table layout of html layout

1.1 Table layout
1. Layout method
        Layout method 1: Use table elements and related elements for layout.
        Layout mode 2: Use the display property value related to the table to simulate the table layout.
2. The difference between the two layouts The
        table element is a semantic label in HTML, which is used to describe data. Using a table-related display property value simply declares how certain elements will look in the browser without semantics.
Note: When you need to tabulate the data, do not use the table defined by the display property value associated with the table.
3. Anonymous table elements - features of CSS table layout: Missing table elements will be created anonymously by browsers
        CSS2.1 Specifications: Elements in the CSS2.1 table model may not all be included in addition to HTML in the documentation language. At this point, those "missing" elements are simulated, allowing the tabular model to work properly. All table elements will automatically generate the required hidden table objects around themselves, making them conform to the three-level nesting relationship of table/inline-table, table-row, and table-cell.
        This means that if you use the "display:table-cell;" attribute for an element without setting its parent container to the "display:table-row;" attribute, the browser will create a table row by default, just like the document as if there really exists a declared table row.
1.2 Table-related display property values
1. Overview
        of table-related display property values so that the elements it sets are rendered like table elements.
2. Detailed introduction
        display:table ; Makes the element render in table style.
        display:table-row; makes the element render in the tr style.
        display:table-cell ; make the element render in td style.
        display:table-row-group ; Makes the element render in the tbody style.
        display:table-header-group; makes the element render in thead style.
        display:table-footer-group; makes the element render in tfoot style.
        display:table-caption; makes the element render as caption style.
        display:table-column; makes the element render in col style.
        display:table-column-group ; Makes the element render in colgroup style.
1.3 Instance details - three-column grid layout
1. Use table and related element layout
Examples :

<table class="table-one">
    <tr>
        <td>CELL A</td>
        <td>CELL B</td>
        <td>CELL C</td>
    </tr>
</table>
or
<table class="table-two">
    <tr>
        <th>CELL A</th>
        <th>CELL B</th>
        <th>CELL C</th>
    </tr>
</table>

.table-one,.table-two{
    border-spacing: 0;
}
.table-one td,.table-two th{
    width: 100px;
    height: 36px;
    border: 1px solid blue;
    text-align: center;
}

2. Use the display attribute value layout related to the table
Example :

.container {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    width: 100px;
    height: 36px;
    border: 1px solid blue;
    line-height:36px;
    text-align:center;
}

<div class="container">
    <div class="row">
        <div class="cell">CELL A</div>
        <div class="cell">CELL B</div>
        <div class="cell">CELL C</div>
    </div>
</div>

The above HTML document explicitly defines the containing table and table row for the three cells, using all the created CSS class names. However, you can reduce these tags by removing a line of div elements and try:

<div class="row">
    <div class="cell">CELL A</div>
    <div class="cell">CELL B</div>
    <div class="cell">CELL C</div>
</div>

Even if the above code omits the row that declares the table, the browser will still create an anonymous table row. More code can also be removed:

<div class="cell">CELL A</div>
<div class="cell">CELL B</div>
<div class="cell">CELL C</div>

        The above code omits the code that declares the table and table row, the browser will also create these anonymous box objects. Even if these label elements are missing, the final effect is still the same.
3. Summarize
        the rules for creating anonymous table elements:
        These anonymous box objects are not changed, nor will they automatically add new tags to the HTML source code.
        If an anonymous element is called in the layout, the browser will create an anonymous box object and set its CSS display property to one of table, table-row, or table-cell as needed. If an element has been set to "display:table-cell;" and its parent (the container that contains it) has not been set to the "display:table-row;" attribute, the browser will create a An anonymous box object set to "display:table-row;" to nest it. And the adjacent sibling nodes with the attribute "display: table-cell;" will also be contained by this anonymous box object, until an element that is not set to "display: table-cell;" is encountered to end the process. one line.

Table table layout of html layout

Guess you like