コンテンツにスキップ

表組(テーブル)における配慮

表組み(テーブル)を利用した表現について

情報をわかりやすく伝えるために表組みはよく利用されますが、スクリーンリーダーなどの支援技術を使って理解するのは、目で見て情報を受け取ることに比べると難しくなります。この点に留意して表組みを利用してください。

表組み(テーブル)を利用する際のポイント

  1. 表組みはできるだけ単純な構造にする
    表組みを利用する場合は、セルの結合や入れ子など表が複雑になると、スクリーンリーダーなどの支援技術での理解するのが困難になることがあります。表組みを利用する場合は、単純な表組みにします。
  2. 表組みの行や列に見出しをつける
    表組みにもテキストの文書と同じく「見出し(表見出し)」をつける必要があります。表の見出しには「列見出し」「行見出し」があります。 表組みに見出しがつけられない場合は、表組みは利用できません。
  3. 表組み以外の表現を検討する
    表組みを利用する場合は、本当に表組みでの表現が妥当かどうか、表組みを利用しなくても表現できないか検討してください。

例:表組みはできるだけ単純な構造にする

単純な表組みにできる情報でのみ表組みを利用してください。セルを結合や入れ子は、なるべくしないようにしてください。(セルをマージすること自体は非推奨ではありません。) セルの結合や入れ子を利用した表組みの場合は、スクリーンリーダーなどの支援技術で読み上げが適切にできるかの確認をしてください。

推奨の例

推奨の表の例を示す画像(単純な表構造)

非推奨の例

非推奨の例を示す画像(セルの結合が複雑)

例:表組みの行や列に見出しをつける

表組みにも見出し(行見出し・列見出し)が必要です。見出しがつけられない場合は、表組みは利用できません。行見出し・列見出しがつけらない場合は、表組み以外での表現を検討してください。

※表の見出しはWebサイト上では<th>で指定します。

列見出しだけがある表

列見出しだけがある表の例を示す画像

行見出しだけがある表

行見出しだけがある表の例を示す画像

列見出しと行見出しがある表

列見出しと行見出しがある表の例を示す画像

例:表組み以外の表現を検討する

元原稿が表組みであっても表組み以外のほうが適切に表現できる場合は、表組み以外での表現も検討してください。

表組みでなくリストで表現する

下記例の表組みは、行見出しをつければ表組みとして扱うことは可能ですが、行見出しを加えない場合は、リストで表現することも検討してください。

表組みでなくリストで表現する例を示す画像

表組み以外の表現方法を検討する

表組みではなく、見出し+テキストとリストなどの文書構造にするなど、他の表現方法も検討してください。

下記例の表組みは、見出しやテキスト、リストで表現することも可能です。

表組みではなく見出し+テキストとリストの文書構造にする例を示す画像