<table>
    <caption>
        Annual surface temperature change in 2022
    </caption>
    <thead>
        <tr>
            <th scope="column">Country</th>
            <th scope="column">Mean temperature change (°C)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">United Kingdom</th>
            <td>1.912</td>
        </tr>
        <tr>
            <th scope="row">Afghanistan</th>
            <td>2.154</td>
        </tr>
        <tr>
            <th scope="row">Australia</th>
            <td>0.681</td>
        </tr>
        <tr>
            <th scope="row">Kenya</th>
            <td>1.162</td>
        </tr>
        <tr>
            <th scope="row">Honduras</th>
            <td>0.945</td>
        </tr>
        <tr>
            <th scope="row">Canada</th>
            <td>1.284</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Global average</th>
            <td>1.4</td>
        </tr>
    </tfoot>
</table>
/* Text alignment */
th,
caption {
  text-align: start;
}

thead th:not(:first-child),
td {
  text-align: end;
}

table {
  caption-side: bottom;
}

/* Headers and footers */
thead {
  border-block-end: 2px solid;
  background: whitesmoke;
}

tfoot {
  border-block: 2px solid;
  background: whitesmoke;
}

th,
td {
  border: 1px solid lightgrey;
  padding: 0.25rem 0.75rem;
}

/* Colouring rows and columns */
table {
  --color: #d0d0f5;
}

thead,
tfoot {
  background: var(--color);
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color), transparent 60%);
}

/* Basic */
body {
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
}

table {
  text-align: left;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.