今回は、、、
「表組み」のお話をしたいと思います。
その前に。
前回のおさらい
前回「リスト」のお話をしました。
覚えていますか?
ちょっと、おさらいをしておきましょう。
要素で言うと「UL」「OL」「LI」「DL」「DT」「DD」です。
「リスト」は色々と活用できる要素です。
デザイン上では、リストっぽくないけど、文書構造的にはリストだよね。
っていうのが良くあります。
極端なことを言うと、サイト全体の構造をリストでも表せるんじゃないかと思っています。
仕様書にも書いてますが、
「リスト形式の実際のプレゼンテーションは、ユーザエージェント依存である。」
当たり前なお話なんですが、見栄えはCSSで調整しましょうということです。
これは、どの要素にも当てはまることですね。
これらを踏まえて、今回のお話に行きましょう。
表組み（ブロック要素）
「テーブルレイアウト」をご存知でしょうか？
一昔前までは、「table要素」でデザインをレイアウトしていく「テーブルレイアウト」というものが主流でした。
※今では、だいぶ減ってきましたが。。。
この「テーブルレイアウト」の一番の問題が
「表組を本来の使い方で利用していない」
ということです。
さらには、アクセシビリティ的に問題があり、
「Web標準」と言われるようになった頃から、敬遠されてきました。
文書構造(HTML)と表現(CSS)は切り分けて考えていきましょうというのが本質ですね。
マージンなどは「透過のスペーサーGIF」というもので、マージンの調整をしていました。
なんとも無意味な使い方です。
あとは、健常者には見えないところですが、音声ブラウザで読み上げると文書構造がバラバラになったり、
テーブルの入れ子が多くなると、読み込み速度が遅くなったり、、、
様々な問題がおこってきます。
つまり、コンピュータにも人にも優しくないWebサイトになってしまうのです。
これらを踏まえて、仕様書（日本語訳）を見ていきましょう。
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。
さらに、見た目のために表が用いられると、
その表が大きなディスプレイのあるシステムで作られた場合、
表を見るために水平スクロールを強いられることがある。
こうした問題を最小限に押さえるため、著者は文書の整形には表ではなく
スタイルシートを用いるべきである。
とありますね。
レイアウトはCSSを用いましょう。
~~~~~~~~~~~~~~~~~~~~~~~~~~
その他、詳細の使い方は、仕様書をご覧ください。
これで、あなたもプロフェッショナル！
それでは、また次回！
※HTML4.01をベースにお話をしています。