Days: table 要素は難しい

November 04, 2005

table 要素は難しい

1 つ前のエントリを書いていて、私が悩んだこと。それは、リスト項目のマークアップを dl 要素で行うか、table 要素で行うかということ。

前のエントリで私は、一対一で対応するデータを列挙しようと思ったのですが、これを表すのに理想的な要素がわからない。縦軸・横軸ともに見出しが必要な訳ではないので、table 要素を使うほどのことはない気がする。かといって dl 要素では対応関係がわかりにくく思える。

結局、悩んだ末に使ったのは table 要素。その理由は扱うデータが氏名で、対応するそれぞれに thead 要素と th 要素で見出しをつけたほうがわかりやすかったから。アクセシビリティの観点と、何よりマークアップの面倒くささからあまり table は使いたくないのですが、情報のわかりやすさを考えれば妥当な選択だったと思っています。

折しも某方面で著名な言葉言葉言葉の闇黒日記で、ちょうど table について取り上げられている。そう、table を使うのは決して悪ではない。問題なのは、それを表を表すためではなく、レイアウト目的に使用すること。逆に table を利用しなくても、CSS の見栄えのために何でもかんでも div 要素で囲むようなマークアップ (いわゆる div 厨) をしていれば、それは正しい HTML とは言えません。

けれども、アクセシビリティを考慮しつつ table 要素でマークアップするのは大変。

鳩丸ご意見番 - TABLE でレイアウトは

…音声ブラウザなどを想定すると、このような配慮が必要なのです。私も自分の PC の紹介や過去に販売された PC のスペック一覧に table を使っていますが、これらがそういった要件を 100 パーセント満たしているという確信は持てません。さらに言うなら、どんなに配慮したところで、それを読み上げる UA が対応していなければ結局 table はユーザーのアクセシビリティを下げる原因となってしまいます。そしてこれは何も音声ブラウザに限ったことではありません。テキストブラウザにも table を表示できないものは多いですし、画面の狭い携帯電話では物理的に表示できないでしょう。

このように考えると、真のユニバーサルなサイトを実現するには、table 要素のマークアップがいかに難しく大変であるかがわかります。そしてこれを安易にレイアウト目的で使用することが、どれほどユーザーに不便を与えるか…私も以前そのようなテーブルレイアウトを行っていただけに、それがもたらす結果を今思うとぞっとします。

「あなたのそのサイト、あなた以外の人には見えていませんよ?」

…もっと世のほーむぺーじおーなーの方々には、テーブルレイアウトのリスクと弊害を知ってほしいです。table 要素の使い方は、そんなに簡単ではないのです。