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

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

概要

項目説明
形式<colgroup>~</colgroup>
サポートH4 / e3 / Ch1 / Fx1 / Sa1 / Op1 / N6
カテゴリ該当無し
親要素table要素 (caption要素よりも後ろ、thead, tbody, tfoot要素よりも前)
子要素span属性が指定された場合は無し(Empty)、span属性無しの場合は 0個以上の col または template要素
タグの省略開始タグ:必須 / 終了タグ:省略可 (空白やコメントが直後に続かない場合)

説明

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=nH4/e3/Ch/Fx/Sa/Op/N6。例えば span=3 とすると、3列の指定を一度に行うことができます。<col> を包含する場合はこの属性は無視されます。
width=nH4-4/e4/Ch/Fx/Sa/Op/N6。列の横幅を数値または"50%"のようなパーセンテージで指定します。
align=alignH4-4/e3-9?。表示位置を指定します。HTML5 では廃止されました。
  center:中央(H4/e3)
  char:指定した文字で揃える(H4)
  justify:均等割付(H4)
  left:左寄せ(H4/e3)
  right:右寄せ(H4/e3)
valign=valignH4-4/e4-9?。縦方向の位置を指定します。HTML5 では廃止されました。
  baseline:ベースライン(H4/e4)
  bottom:下側(H4/e4)
  middle:中央(H4/e4)
  top:上側(H4/e4)
bgcolor=colore3/Ch/Sa/Op。背景色を指定します。Firefox ではサポートされていません。
char=charH4。位置揃えする文字を指定します。HTML5 では廃止されました。
charoff=nH4。char 属性で指定した文字を、セルの左端からどのくらいの位置に表示するかのオフセットを指定します。HTML5 では廃止されました。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

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 などのスタイルシートを用います。IE9 以降では、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-2015 杜甫々
初版:1996年9月10日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/colgroup.htm