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

●表の行に背景色を個別に指定(応用編)

【CSS】

body {
 background-color: #000000;
 color: #ffffff
}
caption {
 font-size: 1em;
 margin-bottom: 0.5em
}
th, td {
 font-size: 1.1em
}
td {
 vertical-align: top
}
.sample1 {
 background: #800000
}
.sample2 {
 background: #808000
}
.sample3 {
 background: #008080
}
.sample4 {
 background: #ff0000
}

【補足】

 直接関係のある書式は.sample1 { background: #800000; } .sample2 { background: #808000; }
.sample3 { background: #008080; } .sample4 { background: #ff0000; } です。

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

【HTML】

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


【注意】

 セル(th、td)にあらかじめ、背景色を指定した場合、後からこの手法で背景色を指定しても反映(変更)させることはできませんのでご注意ください。表本体(table)に背景色を指定した場合は後から表の行(tr)に背景色を塗り替えることが可能です。


■関連ページ

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

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