<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.