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

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

• 概要
• 説明
• 属性
• 使用例
  • 列の幅と背景色
  • 列の右寄せ・左寄せ・センタリング
• 関連項目
• リンク

概要

形式

<colgroup>～</colgroup>

サポート

https://caniuse.com/mdn-html_elements_colgroup

カテゴリ

該当無し

親要素

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 を指定します。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

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 では廃止されました。

使用例

列の幅と背景色

列の幅と背景色は <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>

列の右寄せ・左寄せ・センタリング

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>

関連項目

• <table>
• <col>

リンク

• https://html.spec.whatwg.org/multipage/tables.html#the-colgroup-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/colgroup
• https://caniuse.com/mdn-html_elements_colgroup

---