<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.