Implementing "Table Layout" with CSS

When we make a floating layout, we find that the non-floating element is difficult to align with the bottom of the floating element, which is the flaw of the floating layout. As a result, former front-end workers used <table> to achieve "tabular layouts." Because the row height of the same row in the table is always consistent, the table layout avoids "bottom misalignment" when floating layout is used, and the following is a classic framework for using <table> to implement a "double-column Layout":

<Table>    <TR>        <TD>            <!--left sidebar content -        </TD>                <TD>            <!--right Column content -        </TD>    </TR></Table>

However, with the advent of HTML5, HTML tags increasingly emphasize "semantic", that is, the rational use of HTML tags and their unique properties to format the content of the document. Therefore, the use of <table> to achieve "table layout" is not recommended, because at this time the content of <table> is not a true "table", does not conform to the "semantic" pursuit. So, in the pursuit of the semantic era, how to achieve the traditional "table layout"? That's the use of CSS to achieve.

Using CSS to achieve "table layout" is simple, the first step is to change the traditional <table> layout <table>, <tr>, <td> to the appropriate, "semantic" label, such as the above "double-column Layout" Change to this:

<Main>    < Section>        <aside>            <!--left sidebar content -        </aside>                <article>            <!--right Column content -        </article>    </ Section></Main>

Then add the corresponding display properties for these tags:

<Mainstyle= "Display:table">    < Sectionstyle= "Display:table-row">        <asidestyle= "Display:table-cell">            <!--left sidebar content -        </aside>                <articlestyle= "Display:table-cell">            <!--right Column content -        </article>    </ Section></Main>

In fact, the above code and the traditional <table> layout of the code comparison, you can see that the change is:

Replace <table> <main> with a "display:table" style

Replace <tr> <section> with a "display:table-row" style

The <td> <aside> and <article> are replaced by a "Display:table-cell" style.

The idea of using CSS instead of <table> to "table layout" is basically the same, but further separates the structure and performance of the page, so the best thing is to make the HTML tags as "semantically" as possible.

Implementing "Table Layout" with CSS