XHTML/CSS・トップ | CSSプロパティ・目次

●表の行に背景色を指定

 thead 要素、tfoot 要素、tbody 要素はセル要素(th 要素、td 要素)を含んだ tr 要素(<tr>〜</tr>)をグループ化するときに使われます。これらの thead(表ヘッダ)、tfoot(表フッタ)、tbody(表本体)要素を組み合わせて、表の行に背景色を指定する方法を解説します。


【CSS】

body {
 background-color: #000000;
 color: #ffffff
}
caption {
 font-size: 1em;
 margin-bottom: 0.5em
}
thead {
 background: #800000
}
tfoot {
 background: #808000
}
tbody {
 background: #008080
}

【補足】↓

 直接関係のある書式は thead { background: #800000 } tfoot { background: #808000 } tbody {  background: #008080 } です。また、thead、tfoot、tbody 要素に行の高さ(height)を指定することはできません。(バグが多い。)行に高さを指定したい場合は th, td { height: 2em } のようにセル要素にじかに指定するか、セル要素にクラス名を使って指定してください。(クラス名の使い方は関連ページを参照)

表のタイトル
見出しセル1列目 見出しセル2列目 見出しセル3列目
データセル4行目1列目 データセル4行目2列目 データセル4行目3列目
データセル1行目1列目 データセル1行目2列目 データセル1行目3列目
データセル2行目1列目 データセル2行目2列目 データセル2行目3列目
データセル3行目1列目 データセル3行目2列目 データセル3行目3列目

【HTML】

<table border="枠線の太さ">
 <caption>表のタイトル</caption>
 <thead>
  <tr>
   <th>見出しセル1列目</th>
   <th>見出しセル2列目</th>
   <th>見出しセル3列目</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>データセル4行目1列目</td>
   <td>データセル4行目2列目</td>
   <td>データセル4行目3列目</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>データセル1行目1列目</td>
   <td>データセル1行目2列目</td>
   <td>データセル1行目3列目</td>
  </tr>
  <tr>
   <td>データセル2行目1列目</td>
   <td>データセル2行目2列目</td>
   <td>データセル2行目3列目</td>
  </tr>
  <tr>
   <td>データセル3行目1列目</td>
   <td>データセル3行目2列目</td>
   <td>データセル3行目3列目</td>
  </tr>
 </tbody>
</table>

【解説】↓

 HTMLにおいて、表関係の要素名を記載していく順番は(すべてを使うとすると)必ず、table(テーブル)、caption(キャプション)、thead(表ヘッダ)、tfoot(表フッタ)、tbody(表の本体部分)の順番になるように記載する必要があります。(CSSのほうは決まりはありませんが、HTMLと同じ順番にしておくとわかりやすいと思います。)

 ただし、tfoot 要素に未対応のブラウザがあります。(2003年で開発が終了していますが・・・) tfoot 要素の代わりとして、tbody 要素を配置する方法もあります。しかし、tbody 要素は必要に応じて、複数配置できることになっていますが、筆者のホームページ作成ソフトでは強制的にひとつの要素(<tbody>〜</tbody>)に修正されてしまいます。(なので解説は割愛します。)


【注意事項】↓

 あらかじめ、スタイルシートのほうで、セル(th要素、td要素)に背景色を指定した場合はこの手法は使えません。セルの指定の後に指定したとしても反映されないので注意が必要です。

th {
 background: #800000;
}
td {
 background: #008080;
}

↑間違っても上記のようにセルに対して背景色を指定しない。(指定しますとここで解説している方法は使えません。)

※ここで解説している以外の方法として、行ごとに背景色を指定する方法もあります。(別項参照)


■関連ページ

XHTML/CSS・目次 | テーブル(表)・目次

Copyright (C) 2005-2007 http://www.xml.vc/