表格横纵轴标注方法及BMI表格轴标签设置技术问询

嘿，这事儿其实不难，咱们可以通过调整表格结构来清晰标注横轴和纵轴，让表格的含义一目了然。针对你给出的BMI表格，我给你两种实用的方案：

方案1：用表头合并单元格标注轴标签 #

这种方法最直观，直接在表格顶部添加横轴标签，在第一列添加纵轴标签：

修改后的HTML代码 #

<table>
  <thead>
    <!-- 横轴标签：跨所有列的表头 -->
    <tr>
      <th></th>
      <th colspan="3">Weight</th>
    </tr>
    <!-- 原体重数值表头 -->
    <tr>
      <th>Height</th> <!-- 纵轴标签 -->
      <th>140 lbs</th>
      <th>150 lbs</th>
      <th>160 lbs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>5'4</th>
      <td>24</td>
      <td>25.7</td>
      <td>27.5</td>
    </tr>
    <tr>
      <th>5'6</th>
      <td>22.6</td>
      <td>24.2</td>
      <td>25.8</td>
    </tr>
    <tr>
      <th>5'8</th>
      <td>21.3</td>
      <td>22.8</td>
      <td>24.3</td>
    </tr>
  </tbody>
</table>

渲染后的效果（Markdown表格） #

方案2：结合语义化属性增强可读性 #

如果想要更符合无障碍标准的标注，可以用<caption>说明表格主题，再给表头加上scope属性明确轴的范围，对屏幕阅读器用户更友好：

<table>
  <caption>BMI Chart: Height vs Weight</caption>
  <thead>
    <tr>
      <th scope="colgroup">Height</th>
      <th scope="col">140 lbs</th>
      <th scope="col">150 lbs</th>
      <th scope="col">160 lbs</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">5'4</th>
      <td>24</td>
      <td>25.7</td>
      <td>27.5</td>
    </tr>
    <tr>
      <th scope="row">5'6</th>
      <td>22.6</td>
      <td>24.2</td>
      <td>25.8</td>
    </tr>
    <tr>
      <th scope="row">5'8</th>
      <td>21.3</td>
      <td>22.8</td>
      <td>24.3</td>
    </tr>
  </tbody>
</table>

这里的scope="colgroup"明确第一列是纵轴（Height）的分组标签，scope="col"标注每个横轴（Weight）的数值，scope="row"标注每行的身高值，既清晰又规范。

内容的提问来源于stack exchange，提问作者Adam Zerner