<colgroup>～</colgroup>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 を指定します。
列の幅と背景色は <colgroup> や <col> の style 属性で指定できます。
.my-table { border-collapse: collapse; }
.my-table th { background-color: #ccf; }
.my-table th, .my-table td { border: 1px solid #999; }
<table class="my-table"> <colgroup span="1" style="width:50px; background-color:#ffc;"> </colgroup> <colgroup> <col span="1" style="width:100px; background-color:#fcc;"> <col span="2" style="width:150px; background-color:#cfc;"> </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 属性は廃止されました。<colgroup> や <col> の style 属性でも指定できません。代わりにスタイルシートの nth-child() と text-align を用います。
.my-table {
border-collapse: collapse;
}
.my-table th {
background-color: #ccc;
}
.my-table th,
.my-table td {
width: 100px;
border: 1px solid gray;
}
.my-table td:nth-child(1) {
text-align: center;
}
.my-table td:nth-child(2) {
text-align: center;
}
.my-table td:nth-child(3) {
text-align: right;
}
.my-table td:nth-child(4) {
text-align: right;
}
<table class="my-table"> <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 |