月次の集計表で「1200」と「800」が並んでいても、どの部門の何の数字なのかが表から分からなければ確認に使えません。HTMLの表では罫線を付けるとともに、題名と行・列の見出しを対応させます。
captionは表全体の説明、thは見出しのセルです。scope="col"を列の見出しへ、scope="row"を行の見出しへ付けると、単純な集計表の関係を示せます。セルを太字にすることと、見出しとして定義することは別です。
期間と単位を題名に入れる
この例は架空の26年10月の問い合わせ対応件数を扱います。値は北が12件、南が8件、合計20件です。売上や料金の実績ではなく、表の構造を確かめるためのデータです。
<table>
<caption>26年10月の問い合わせ対応件数</caption>
<thead>
<tr>
<th scope="col">担当部門</th>
<th scope="col">対応済み件数</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">北</th>
<td>12件</td>
</tr>
<tr>
<th scope="row">南</th>
<td>8件</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">合計</th>
<td>20件</td>
</tr>
</tfoot>
</table>
captionはtableの開始直後に置きます。画面の別の場所にある見出しだけに期間を書いていると、表を単独で探したときに対象が分からなくなります。表だけでも何の期間と単位を扱うかを読めるようにすると、後から資料へ転記した場合も意味を追いやすくなります。
行と列で見出しを分ける
上段の「対応済み件数」は列の意味を示し、左側の「北」「南」は行の対象を示します。見出しセルをth、データセルをtdと分け、担当部門のセルにもscope="row"を付けています。
thead、tbody、tfootは、見出し、明細、集計結果のまとまりを示します。ただし、要素を分けただけで合計値を計算してくれるわけではありません。12と8の合計が20か、元データの件数と一致するかは、表を生成する処理で確かめます。
件数が未確認なのか0件なのかも分けます。元のデータがないときに0を入れてしまうと、問い合わせがなかったという意味になります。表示上「未確認」と置く場合は、その理由と集計から除いた範囲も、表の近くで説明してください。
複雑な表を小さくする判断
部署、月、区分を一枚の表へ詰め込むと、結合セルが増えて対応を追いにくくなります。まずは月ごとに分けるなど、行と列が一つずつの見出しで説明できる形を検討します。見出しが複数段になる場合は、scopeだけで十分かを確認し、必要に応じてidとheadersによる対応も使います。
画面を整えるためにdivを格子状に並べても、そのままデータ表と同じ構造にはなりません。逆に、二段組のレイアウトだけのためにtableを使う必要もありません。行と列の対応で読むデータかどうかを基準にします。
表示を変えたあとも確認する
CSSを追加したら、画面幅を狭めた場合と文字を拡大した場合を確認します。見出しだけが隠れたり、列の途中から表示されたりすると、数字を別の項目と取り違える場合があります。横へ広い表ではスクロールできることも伝わるかを見ます。
この例はHTMLの要素と数値の対応をブラウザで確認する範囲です。支援技術での読み上げや、すべての端末での表示を検証した結果ではありません。実際に配る画面では表の題名、見出し、単位、元データとの一致を一組で確かめてください。
