CSS - display:table vs. HTML table elements

The HTML table elements and their equivalent CSS display styles.

HTML                                                             CSS
<html>
<body>
    <table>                                                     display: table
        <caption>Population by Country</caption>               display: table-caption
        <colgroup>                                              display: table-column-group
            <col>                                               display: table-column
            <col span="2" style="background-color:lightblue">   display: table-column
            <col>                                               display: table-column
        </colgroup>
        <thead>                                                 display: table-header-group
            <tr>                                                display: table-row
                <th>Country</th>                               display: table-cell
                <th>Pop</th>                                   display: table-cell
                <th>Pop 2030</th>                              display: table-cell
                <th>% change</th>                              display: table-cell
            </tr>
        </thead>
        <tbody>                                                 display: table-row-group
            <tr>                                                display: table-row
                <td>China</td>                                 display: table-cell
                <td>1.38 billion</td>                          display: table-cell
                <td>1.41 billion</td>                          display: table-cell
                <td>2.1%</td>                                 display: table-cell
            </tr>
        </tbody>
        <tfoot>                                                 display: table-footer-group
            <tr>                                                display: table-row
                <td>Total</td>                                 display: table-cell
                <td>3 billion</td>                             display: table-cell
                <td>3.3 billion</td>                           display: table-cell
                <td>10%</td>                                  display: table-cell
            </tr>
        </tfoot>
    </table>
</body>
</html>
 

HTML      CSS
 
table     { display: table }
caption   { display: table-caption }
colgroup  { display: table-column-group }
col       { display: table-column }
thead     { display: table-header-group }
tbody     { display: table-row-group }
tr        { display: table-row }
th, td    { display: table-cell }
tfoot     { display: table-footer-group }


Population by country
Country Pop Pop 2030 % change
China 1.38 billion 1.41 billion 2.1%
India 1.31 billion 1.53 billion 16.8%
USA 322 million 356 million 10.6%
Total 3 billion 3.3 billion 10%




Ads by Google


Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath