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%

Reference: w3.org | The CSS table model