Tables in CSS

Tables can be created using table tag.

Australia		India
Population	GDP per capita	Population	GDP per capita
25.69 million	$51,812	1.38 billion	$1900
Australia has more gdp per capita

Here is the html source of above table.

<table>
<thead>
  <tr>
    <th colSpan={2}>Australia</th>
    <th colSpan={2}>India</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>Population</td>
    <td>GDP per capita</td>
    <td>Population</td>
    <td>GDP per capita</td>
  </tr>
  <tr>
    <td>25.69 million</td>
    <td>$51,812</td>
    <td>1.38 billion</td>
    <td>$1900</td>
  </tr>
</tbody>
  
<tfoot>
  <tr>
    <th colSpan={4}>Australia has more gdp per capita</th>
  </tr>
</tfoot>
</table> 

Styling tables

Most of the times, you will need to apply 2 different background colors in alternate rows. You can do this using below selectors.

tr:nth-child(odd) {
  background-color:grey;
}
tr:nth-child(even) {
  background-color:yellow;
}