WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順)

<colgroup> 「表の列(縦列)グループ化属性」[読み方:コルグループ/カラムグループ]

<colgroup>タグは、表の表の列(縦列)グループ化属性をまとめて指定する場合に使用します。
<table>の子要素となるため、必ず<table>~</table>の中に記述する必要があります。

HTML規格HTML4.01HTML5
使用可否
広告

<colgroup> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
なし<table>内で
<caption>より後ろ
<thead><tbody><tfoot>より前
span属性の指定有の時、無
span属性の指定無の時、<col>
終了タグ条件付き省略可
  • 終了タグ省略条件
    <body>の直後が、空白文字、コメント以外の場合。

<colgroup> の属性

【構文】
<table>
<colgroup span="列数"></colgroup>
<colgroup>
<col>
<col>
</colgroup>

</table>
属性意味値のサンプルなど
span="列数"対象となる列数
align="文字の左右位置"表の列(縦列)の文字左右位置
※HTML5で廃止。スタイルシートで指定。
意味
left左寄せ
right右寄せ
center中央寄せ
justify両端揃え
valign="文字の上下位置"表の列(縦列)の文字上下位置
※HTML5で廃止。スタイルシートで指定。
意味
top上揃え
middle中央揃え
bottom下揃え
baselineベースライン揃え
width="列幅"表の列(縦列)の幅(ピクセル、パーセント)
※HTML5で廃止。スタイルシートで指定。
廃止された属性
  • char
  • charoff
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性
ページTOP

<colgroup>タグのサンプル

<table border="1" cellspacing="1" cellpadding="3">
<caption>秋の中間テスト結果</caption>
<colgroup style="width: 150px"></colgroup>
<colgroup>
<col span="3" style="width: 80px">
<col style="width: 120px">
</colgroup>
<tbody>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th><th>合計(平均)</th></tr>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td><td>247 (82.3)</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td><td>214 (71.3)</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td><td>183 (61.0)</td></tr>
</tbody>
</table>
秋の中間テスト結果
氏名国語理科社会合計(平均)
山田 太郎986287247 (82.3)
鈴木 花子857158214 (71.3)
斉藤 一郎666552183 (61.0)
ページTOP

スタイルシート(CSS)を使用しリンクの見た目を変えるサンプル

<head>
<style type="text/css">
<!--
#css-s1 {background-color: #0066ff;}
#css-s1 col {background-color: #0066ff;color: #fff;}
#css-s1 th {background-color: #d0f0ff;text-align: center;}
#css-s1 td {background-color: #fff;text-align: center;}
-->
</style>

</head>

<table border="0" cellspacing="1" cellpadding="3" id="css-s1">
<caption>秋の中間テスト結果</caption>
<colgroup style="width: 150px"></colgroup>
<colgroup>
<col span="3" style="width: 80px">
<col style="width: 120px">
</colgroup>
<tbody>
<tr><th>氏名</th><th>国語</th><th>理科</th><th>社会</th><th>合計(平均)</th></tr>
<tr><td>山田 太郎</td><td>98</td><td>62</td><td>87</td><td>247 (82.3)</td></tr>
<tr><td>鈴木 花子</td><td>85</td><td>71</td><td>58</td><td>214 (71.3)</td></tr>
<tr><td>斉藤 一郎</td><td>66</td><td>65</td><td>52</td><td>183 (61.0)</td></tr>
</tbody>
</table>
秋の中間テスト結果
氏名国語理科社会合計(平均)
山田 太郎986287247 (82.3)
鈴木 花子857158214 (71.3)
斉藤 一郎666552183 (61.0)
ページTOP

留意事項

  • align、valign、width属性はHTML5で廃止されました。文字位置を指定したい場合は、サンプルのようにスタイルシートの「text-align」で指定してください。
  • <colgroup>は<table>タグ内で使用する必要があります。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン