| やぼったい |
危険度：★★ |
33 表の背景がきれいに表示されないのを解決
文＝新谷剛史（（株）セカンドファクトリー）
テーブルに関するタグは、レイアウトのために使われていた時期も長かったためよく知っているように思われがちだが、意外な特性やあまり使われないタグもある。その中でも、テーブルやセルの「背景」に関する特性はよく使われるため、知っておくと便利だ。ヘッダー行に背景を指定したい場合、「行だからタグに指定すればよいだろう」と思ってCSSを準備すると、指定したとおりヘッダー行全体に背景を表示できるブラウザもあるが、Internet Explorerではすべてのthやtdに背景を指定したときと同じように、各セルに背景が表示されてしまう。テーブル全体（＜table＞タグ）に指定した背景は多くのブラウザで同じ表示をすることができるので、まずテーブル全体に背景を指定してヘッダー部分の背景を実現し、背景を見せたくないセルには白などの色を指定して画像背景を隠してしまうとよいだろう。
HTML
CSS
【1】＜tr＞に背景を指定した場合、いくつかのブラウザではセル（＜td＞タグや＜th＞タグ）に背景を指定した動作と一緒になる。FireFoxは＜tr＞への背景指定も有効なため、＜tr＞に背景を指定するのは控えよう。「＜tr＞にクラスを指定してそのクラスの＜th＞に背景を指定する」という使い方をするために、＜tr＞にクラスを指定するのは、＜tr＞タグに背景を指定しているわけではないので問題ない。
CSS
【2】ヘッダー行に背景を指定するためには、ヘッダー行に指定したい背景をテーブルの背景にする。テーブルに背景を置くので見え方には多少制約がある。また、背景を表示させたくないセルには背景色を指定する。背景色を指定しない場合、そのセルにも見せたくない背景が表示されてしまう。
CSS
【3】画像のつくり方とセルの設定を工夫することで、縦横にヘッダーが存在するセルに背景を表示させることが可能だ。このようなグラデーションの画像をテーブル背景にすることで、縦横2方向のヘッダー部分に背景を指定している。
［INDEX］
●整理されていない
>>> 03 リストマーカーと個条書きのバランスが悪いのを解決
>>> 04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決
●やぼったい
>>> 33 表の背景がきれいに表示されないのを解決
>>> 34 写真を入れると文章が読みにくいのを解決
●平凡でつまらない
>>> 41 長方形のボックスにインパクトが足りないのを解決
>>> 42 枠にとらわれたデザインになるのを解決
●メリハリがない
>>> 75 画像とテキストの上辺の位置がそろわないのを解決
>>> 76 テキストリンクがパッとしないのを解決
