colgroup は COLumn GROUP の略です。テーブルのカラム(列)グループに対して、スタイルシートで横幅や背景色などの指定を行います。<colgroup> でカラムグループの設定を行い、加えて、<col> で個々のカラムの設定を行うこともできます。
HTML5 では width, align, valign 属性が廃止されました。width属性は、<colgroup> または <col> に style="width:～" を指定することで実現できますが、align, valign は <colgroup> や <col> にスタイルシートの text-align を指定しても効きません。代わりに :nth-child(n) を用いて text-align を指定します。ただし、Internet Explorer 8 などのブラウザでは、:nth-child(n) をサポートしていないので注意してください。下記にサンプルを示しています。
<style>
table.meibo { border-collapse: collapse; }
table.meibo th { background-color: #ccccff; }
table.meibo th,
table.meibo td { border: 1px solid #666666; }
</style>
<table class="meibo">
<colgroup span="1" style="width:50px; background-color:#ccccff;">
</colgroup>
<colgroup>
<col span="1" style="width:100px; background-color:#ffcccc;">
<col span="2" style="width:150px; background-color:#ccffcc;">
</colgroup>
<tr><th>名前</th><th>出身</th><th>Ａ値</th><th>Ｂ値</th></tr>
<tr><td>田中</td><td>東京</td><td>123</td><td>12.3</td></tr>
<tr><td>鈴木</td><td>大坂</td><td>456</td><td>45.6</td></tr>
<tr><td>佐藤</td><td>京都</td><td>789</td><td>78.9</td></tr>
</table>
| 名前 | 出身 | Ａ値 | Ｂ値 |
|---|---|---|---|
| 田中 | 東京 | 123 | 12.3 |
| 鈴木 | 大坂 | 456 | 45.6 |
| 佐藤 | 京都 | 789 | 78.9 |
HTML5では、align属性は廃止されました。代わりに、text-align などのスタイルシートを用います。Internet Explorer 9 以降では、nth-child を用いて下記の様に記述できます。
.mytable {
border-collapse: collapse;
}
.mytable th {
font-weight: bold;
background-color: #cccccc;
}
.mytable th, .mytable td {
width: 100px;
border: 1px solid gray;
}
.mytable td:nth-child(1) {
text-align: center;
}
.mytable td:nth-child(2) {
text-align: center;
}
.mytable td:nth-child(3) {
text-align: right;
}
.mytable td:nth-child(4) {
text-align: right;
}
<table class="mytable"> <tr><th>名前</th><th>出身</th><th>A値</th><th>B値</th></tr> <tr><td>田中</td><td>東京</td><td>123</td><td>12.3</td></tr> <tr><td>鈴木</td><td>大阪</td><td>456</td><td>45.6</td></tr> <tr><td>佐藤</td><td>京都</td><td>789</td><td>78.9</td></tr> </table>
| 名前 | 出身 | A値 | B値 |
|---|---|---|---|
| 田中 | 東京 | 123 | 12.3 |
| 鈴木 | 大阪 | 456 | 45.6 |
| 佐藤 | 京都 | 789 | 78.9 |