<colgroup> - テーブルのカラム設定

トップ > HTMLリファレンス > <colgroup>

概要

形式
<colgroup>~</colgroup>
サポート
LS / H4 / e3 / Ch1 / Fx1 / Sa1 / Op1 / N6
カテゴリ
該当無し
親要素
table要素 (caption要素よりも後ろ、thead, tbody, tfoot要素よりも前)
子要素
span属性有りの場合: 無し(Empty)
span属性無しの場合: 0個以上の col または template要素
タグの省略
開始タグ: colgroup 要素配下が col 要素で始まる場合、および、終了タグが省略された colgroup 要素の直後で無い場合は省略可能。
終了タグ: ASCII ホワイトスペースやコメントが直後に続かない場合は省略可能。
属性
グローバル属性
span

説明

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) をサポートしていないので注意してください。下記にサンプルを示しています。

属性

グローバル属性
詳細は グローバル属性 を参照してください。
span=n
LS/H4/e3/Ch/Fx/Sa/Op/N6
例えば span=3 とすると、3列の指定を一度に行うことができます。<col> を包含する場合はこの属性は無視されます。
width=n
[非推奨] H4-4/e4/Ch/Fx/Sa/Op/N6
列の横幅を数値または"50%"のようなパーセンテージで指定します。HTML5 では廃止されました。
align=align
[非推奨] H4-4/e3-9?
表示位置を指定します。HTML5 では廃止されました。
center
中央(H4/e3)
char
指定した文字で揃える(H4)
justify
均等割付(H4)
left
左寄せ(H4/e3)
right
右寄せ(H4/e3)
valign=valign
[非推奨] H4-4/e4-9?
縦方向の位置を指定します。HTML5 では廃止されました。
baseline
ベースライン(H4/e4)
bottom
下側(H4/e4)
middle
中央(H4/e4)
top
上側(H4/e4)
bgcolor=color
[非推奨] e3/Ch/Sa/Op
背景色を指定します。Firefox ではサポートされていません。
char=char
[非推奨] H4-4
位置揃えする文字を指定します。HTML5 では廃止されました。
charoff=n
[非推奨] H4-4
char 属性で指定した文字を、セルの左端からどのくらいの位置に表示するかのオフセットを指定します。HTML5 では廃止されました。

使用例

HTML
<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>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値
田中東京12312.3
鈴木大坂45645.6
佐藤京都78978.9

列の右寄せ・左寄せを実現する方法

HTML5では、align属性は廃止されました。代わりに、text-align などのスタイルシートを用います。Internet Explorer 9 以降では、nth-child を用いて下記の様に記述できます。

CSS
.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;
}
HTML
<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値
田中東京12312.3
鈴木大阪45645.6
佐藤京都78978.9

関連項目

<table><col>

リンク


Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/colgroup.htm