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

●表の列の幅をまとめて指定する

 colgroup 要素は幾つかの縦列に同じスタイルを(複数)指定するときに使います。 col 要素は縦列ごとに個別のスタイルを指定するときに使います。両方ともタグのみを記載し、要素内容は省略します。例えば、 <colgroup 〜 ></colgroup>間の要素内容は省略します。ただし、colgroup 要素は col 要素を要素内容として配置することができます。ここではその colgroup 要素と col 要素を組み合わせた解説をします。(これらの要素は使えるケースが少ないので単独での使い方は割愛します。)また、col 要素は</col>の終了タグを省略することができます。


【CSS】

caption {
 font-size: 1em;
 margin-bottom: 0.5em;
}
td, th {
 font-size: 1em;
}
th {
 background: #800000;
}
td {
 background: #008080;
}
.moon8 {
 width: 8em;
}
.moon10 {
 width: 10em;
}
.moon15 {
 width: 15em;
}

【補足】

 直接関係あるCSSの書式は .moon8 { width: 8em } .moon10 { width: 10em } .moon15  { width: 15em } の書式です。下の表は縦1列目に 8em の横幅をまとめて指定し、縦2列目には 10em の横幅を指定し、縦3列目に 15em の横幅をそれぞれまとめて指定しています。width プロパティの値として、em(エム)を使っていますが、そのほかとして、長さを表す単位付きの数値とパーセンテージ(〜%)が使えます。

 moon8、moon10、moon15 はクラス名で作者が任意の名前を付けます。(クラス名の使い方は一番下の関連ページを参照にしてください。)

表のタイトル
見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル
データセル データセル データセル

【HTML】

<table border="枠線の太さ">
 <caption>表のタイトル</caption>
 <colgroup>
  <col class="moon8">
 </colgroup>
 <colgroup>
  <col class="moon10">
 </colgroup>
 <colgroup>
  <col class="moon15">
 </colgroup>
 <tbody>
  <tr>
   <th>見出しセル</th>
   <th>見出しセル</th>
   <th>見出しセル</th>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
  <tr>
   <td>データセル</td>
   <td>データセル</td>
   <td>データセル</td>
  </tr>
 </tbody>
</table>

【解説と補足】

 colgroup 要素と col 要素は縦列の数だけ配置します。例えば、表の縦列が4列あった場合は colgroup 要素を四つ配置します。最初の colgroup 要素は縦1列目となり、順を追って二番目の colgroup 要素が縦2列目、三番目の colgroup 要素が縦3列目を意味します。そして、 colgroup 要素の要素内容に col 要素を配置し、col 要素に class 属性を付けて、それぞれの縦列に任意の横幅をまとめて指定しています。

 colgroup 要素をHTML文書に記載する位置としては caption 要素があればその直後に記載し、なければ table 要素の直後に記載します。もし、このほかに thead 要素と tfoot 要素があるときは caption 要素、colgroup 要素、col要素、thead 要素、tfoot 要素、tbody 要素の順番に記載してください。

※colgroup 要素と col 要素を使い、縦列のスタイルをまとめて指定する方法は、背景色、上下左右の位置揃え、高さなどを指定するとブラウザの種類やバージョンによってはバグがあることから、これらの指定には実質、使えません。


■関連ページ

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

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