テーブルはいつまでたってもなかなか難しいものです。最近、スタイルシートだけでレイアウトするようなページが徐々に増えているようです。私もぜひ挑戦したいと思っています。bordercolorやbgcolorやセルの幅なども非推奨になっていますので非推奨な属性を使わないテーブルを作ってみます。もうホームページビルダーの出番はどこにもありません。私のホームページの中では初めてhtml4.01のstrictという文法に厳密なモードで書きました。古いブラウザを使っている人は左揃えになるかもしれません。borderの表示形式はcollapseで指定します。border-collapse:collapseでcellspacing="0"と同じようになります。ちなみにcollapseとはつぶれるとか崩壊するという意味のようです。
| 男子 | 女子 | 合計 | |
|---|---|---|---|
| １年生 | ２５ | ２３ | ４８ |
| ２年生 | ２３ | ２４ | ４７ |
| ３年生 | ２６ | ２５ | ５１ |
tdのborder-leftとborder-rightはともにnoneとしています。theadのbackgroundは#ffcc99にしています。
| 男子 | 女子 | |
|---|---|---|
| 国語 | 85 | 87 |
| 数学 | 88 | 85 |
| 英語 | 88 | 90 |
| 社会 | 85 | 88 |
| 理科 | 83 | 80 |
| 音楽 | 85 | 88 |
tdのborder-topとborder-bottomはともにnoneとしています。横線はないですが１行ごとにbackgroundに色を付けていますので見やすいです。
| 男子 | 女子 | 合計 | |
|---|---|---|---|
| １年生 | 85 | 83 | 168 |
| ２年生 | 88 | 85 | 173 |
| ３年生 | 82 | 83 | 165 |
| 合計 | 255 | 251 | 506 |
tdのborder-leftとborder-rightともにnoneとしている。col要素にクラスを指定して、１列おきにグレーの背景を指定しています。
| 温暖化 | 食べ物 | ごみ問題 |
|---|---|---|
| 石油文明 | 農薬・化学薬品 | 工業化の行き詰まり |
| 二酸化炭素の排出 | 遺伝子組み換え食品 | ダイオキシン |
| 砂漠化 | 鳥インフルエンザ | 物から心の充足 |
キャプション部分にも背景を付けてテーブルと一体化させてあります。