<table>
<!-- caption 元素用于总结表格的内容,若存在则必须为表格的第一个元素 -->
<caption>
Annual surface temperature change in 2022
</caption>
<!-- thread 和 tbody 分别包含表格的头部和主体行 -->
<!-- tr 形成行,其中包含 th(头部)和 td(主体)单元格 -->
<thead>
<tr>
<th scope="column">Country</th>
<th scope="column">Mean temperature change (°C)</th>
</tr>
</thead>
<!-- 对于 th,可以存在可选的 scope 属性,值为 row 或 column,以推断标题所属的轴 -->
<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>
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.