Table

横にはみ出しても、スクロールするのは表だけです

列が増えると、表は必ず横にはみ出します。 そのとき横スクロールする枠が要りますが、 Table がその枠を持っています。 利用側は書きません。

利用側に書かせると、書き忘れたときにページ全体が横にスクロールします。

thead と tbody は素のまま書きます

どちらにも当てるものがありません。中身の無いコンポーネントは置いていません。

<Table>
  <thead>
    <TableRow>
      <TableHeaderCell>距離帯</TableHeaderCell>
      <TableHeaderCell numeric>本数</TableHeaderCell>
    </TableRow>
  </thead>
  <tbody>
    <TableRow>
      <TableCell>5km</TableCell>
      <TableCell numeric>128</TableCell>
    </TableRow>
  </tbody>
</Table>

数字の列は numeric を付けます

右に寄り、桁の幅が揃います。 揃えないと、上下の行で桁の位置がずれて 読み比べられません。

見出しの項目にも付けてください。中身と見出しが別の側に寄ると読みにくくなります。

見出しは申告されます

TableHeaderCell は既定で列の見出しとして申告します。 行の見出しにするときは scope="row" を渡してください。

申告しないと、読み上げがどの項目がどの見出しに属するかを言えません。

表そのものは素の table です

役割を付け替えていません。素の table が既に表として読まれます。