課題
我々は遠い昔にテーブルを使ったレイアウトを放棄しましたが、テーブ
ル自体は近年の Web サイトでも引き続き使われています。例えば統計
データや電子メール、メタデータの一覧などでテーブルがしばしば見られ
ます。table以外の要素も、 display要素にテーブル関連のキーワード
を指定するとテーブルのようにふるまうようになります。このやり方は便
利なようにも思えますが、動的なコンテンツを含む場合に予期できないレ
イアウトが行われることがあります。ここでは、列の幅はコンテンツに応
じて調整されます。幅を明示的に指定しても、単なるヒントとしてしか機
能しません。表示の例を図7.5 に示します。
その結果、たとえ表形式のデータであっても別の要素を使うか、レイア
ウトの不安定さを受け入れるかという選択を我々は迫られています。テー
ブルを行儀よくふるまわせる方法はあるのでしょうか。
解決策
ここでの解決策は、 CSS2.1 で導入されたほとんど知られていないプロ
パティにありました。それは table‐layoutプロパティです。デフォル
ト値はautoで、いわゆる自動的なレイアウトのアルゴリズムが適用され
て図7.5 のような表示になります。一方fixedを指定すると、より予測し
やすいレイアウトが行われるようになります。描画エンジンが勝手にすべ
てを決定してしまうのではなく、ページの作成者つまり読者自身がさまざ
まな指定を行えます。指定されたスタイルは尊重されます。単なるヒント
テーブルの列幅を自在に
指定する