tableの列をグループ化し、スタイルをまとめて指定
<colgroup></colgroup>
| プロパティ | IE6,7 | Firefox12 |
|---|---|---|
| background | ○ | ○ |
| width | ○ | ○ |
| padding | ○ | × |
| text-align | ○ | × |
| font-weight | ○ | × |
| color | ○ | × |
サンプルソース
<html>
<head>
<title>COLGROUP要素 表の列をグループ化</title>
<style type="text/css">
<!--
#colTbl{
border-collapse:collapse; /*枠線の表示の仕方*/
}
#colTbl th{
background-color: #dbfeab; /*th 背景色*/
}
#colTbl td,th{
border:1px solid gray;/*th,tdのボーダー*/
padding: 5px; /*セル内余白*/
}
.colG1{
background-color: lavender;
width: 120px;
}
.colG2{
background-color: lightcyan;
}
-->
</style>
</head>
<body>
<table id="colTbl">
<caption>COLGROUPに対する<br>CSSプロパティの有効、無効</caption><!--表題-->
<colgroup class="colG1"></colgroup><!--１列目-->
<colgroup class="colG2" ></colgroup><!--２列,３列目グループ化-->
<tbody>
<tr>
<th>プロパティ</th><th>IE6,7</th><th>Firefox12</th>
</tr>
<tr>
<td>background</td><td>○</td><td>○</td>
</tr>
<tr>
<td>width</td><td>○</td><td>○</td>
</tr>
<tr>
<td>padding</td><td>○</td><td>×</td>
</tr>
<tr>
<td>text-align</td><td>○</td><td>×</td>
</tr>
<tr>
<td>font-weight</td><td>○</td><td>×</td>
</tr>
<tr>
<td>color</td><td>○</td><td>×</td>
</tr>
</tbody>
</table>
</body>
</html>
colgroup 要素
表の列（縦方向）をグループ化して、
列単位でＣＳＳ（スタイル)を一括して適用したいときに使用します。
また、隣接する複数の列をグループ化する場合はその列数を、
列単位でＣＳＳ（スタイル)を一括して適用したいときに使用します。
また、隣接する複数の列をグループ化する場合はその列数を、
span属性で指定します。<colgroup>を書く位置は<table><caption> の直後に<caption>がなければ<table>の直後に記載 します。span="値" 属性
値には何列を指定するか数字をいれます。
記載なしの場合は1を指定したことになります。
span="グループ化する列数"記載なしの場合は1を指定したことになります。
colgroup に対する CSSプロパティの有効、無効
上記のサンプルの表をご覧ください。
表の装飾によく利用するプロパティをcolgroup要素に指定して見ました。
表の構造は 表題，行，セルから成り立っていますが、
そのセルの幅
表の装飾によく利用するプロパティをcolgroup要素に指定して見ました。
- Firefoxは
text-align，font-weight，colorなどフォント系の装飾が無効ですが - IE6,7は有効になっています。//仕様が正しくない。
background,widthは IE, Firefox 両方で有効です。
th,tdの親要素はtbodyやtrでありcolgroupではないのでプロパティ継承はされないのでcolgroupに指定したtext-align，などの値はth,tdの中の文字列には反映されません。表の構造は 表題，行，セルから成り立っていますが、
そのセルの幅
widthや背景 backgroundには適用されると考えるのが妥当でしょう........<colgroup> CSSの優先順位
<tbody>や<tr>,<tr>,<th>にスタイルを設定した場合、<colgroup>の設定より優先されます。上記のサンプルでは
<th>（一行目）に背景色を指定しているので<colgroup>の背景色の設定の反映は二行目からになります。
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
javascript テーブル 列の背景色 変更 cellIndexプロパティ
text-align プロパティ css
borderプロパティ css
border-styleプロパティ; ボーダーのスタイルの設定
background 背景に関するプロパティ 一覧
border-radiusプロパティ 角丸ボーダー
paddingプロパティ ボックスの内側の余白
