スマホで横長の表を読みやすくする方法｜横スクロールと見出しの設定

見出しセルとデータセルの関係をHTMLで示す

表の見出しセルにはth、データセルにはtdを使います。単に文字を太くしただけでは、支援技術へ見出しとの関係が伝わるとは限りません。

行と列の両方に見出しがある単純な表では、列見出しにscope="col"、行見出しにscope="row"を指定して方向を示します。表の題名はcaptionで付けられます。結合セルや多段の見出しがある複雑な表は、構造に応じた関連付けが必要です。まず表を単純にできないかも検討しましょう。

横スクロールやカード表示でも項目との対応を維持

幅が足りない場合は、表を包む領域で横にスクロールできる方法があります。右側を単に非表示にするのではなく、必要な情報へ到達できるようにします。スマホ向けにカードへ組み替える場合も、項目名と値の組み合わせを残します。列を一つ隠した結果、比較に必要な条件まで消えていないかを確認しましょう。

比較の目的を絞り、スマホ・拡大・キーボードで確認

私なら、最初に「何を比べて選ぶ表か」を一文で書きます。目的の違うデータまで一枚に詰めるより、小さな表に分けたほうが読みやすい場合があります。スマホ、拡大表示、キーボード操作でも確認して、端まで読める状態にしたいですね。