データテーブルとレイアウトテーブルを区別する
カテゴリー: HTML/CSS/JS
この記事は2015年3月19日に書かれたものです。情報が古い可能性がありますのでご注意ください。
CSS によるレイアウトが当たり前となり、十数年前のようなバリバリのテーブルレイアウトというのはほとんど見られなくなりました。一方で、CMS の普及により、WYSIWYG エディタ上の編集エリア内で、複雑なレイアウトを実現するためにテーブルを使うという場合があると思います。
当然、編集エリアにデータテーブルを置く場合もありますので、枠線の有無やセル内余白など、レイアウトテーブルとデザインを区別する必要があります。
WYSIWYG エディタのスタイルボタンなどに予めレイアウトテーブル用の class を登録しておくという方法も考えられますが、最も単純で明快なのは、テーブルの枠線を付けるか付けないかという区別です。
HTML5 では、table 要素の border 属性の値には、1 または空文字列(border=""
)のみを指定することができ、これ以外の値を指定することはできません。( WYSIWYG エディタによっては、テーブルを挿入する際の枠線の初期値が 0 になっているものが多く、これは HTML5 では使えないので、設定ファイルで初期値を 1 か空に修正しておく必要があります。)
以前、テーブルの枠線は CSS で付けるべきで、border 属性は使うべきでないという考え方もありましたが、HTML5 では、table 要素に border="1"
を追加することで、その表がレイアウト目的ではないということを示すことができます。
つまり、WYSIWYG エディタのテーブルのプロパティで、枠線を 1 とすればデータテーブル、空にすればレイアウトテーブルというわけです。これによって書き出される border 属性の有無を使い、CSS の属性セレクタで表のスタイルを区別することができます。
※下記のサンプルは、予めリセット CSS で margin や padding、border を 0 に設定してあるものとします。
table {
border-collapse: collapse;
border-spacing: 0;
}
table[border="1"] {
border: 1px solid #ccc;
}
table[border="1"] th,
table[border="1"] td {
padding: 5px;
border: 1px solid #ccc;
}
この属性セレクタ、IE6 は未対応だったのですが、昨年(2014年)4月に Windwos XP のサポート終了と共に IE6 のサポートも終了しましたので、IE6 対策を考える必要もなく幅広く使えるようになりました。
また、2016年1月12日からは IE のサポートポリシーが変更され、各々の Windows OS 向けの最新バージョンの IE だけがサポート対象となりますので、IE7 と IE8 がサポート対象から外れることになります。(Internet Explorer サポートポリシー変更の重要なお知らせ – Microsoft)
あと9カ月余りもすれば、IE 向けの CSS ハックを使うこともほとんど無くなりますね。