cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順)
WEBページ作成
広告
<colgroup> 「表の列(縦列)グループ化属性」[読み方：コルグループ/カラムグループ]
広告
<colgroup> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| なし | <table>内で <caption>より後ろ <thead><tbody><tfoot>より前 | span属性の指定有の時、無 span属性の指定無の時、<col> | 終了タグ条件付き省略可 |
- 終了タグ省略条件
<body>の直後が、空白文字、コメント以外の場合。
<colgroup> の属性
【構文】
<table>
<colgroup span="列数"></colgroup>
<colgroup>
<col>
<col>
</colgroup>
～
</table>
<colgroup span="列数"></colgroup>
<colgroup>
<col>
<col>
</colgroup>
～
</table>
| 属性 | 意味 | 値のサンプルなど | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| span="列数" | 対象となる列数 | |||||||||||
| align="文字の左右位置" | 表の列(縦列)の文字左右位置 ※HTML5で廃止。スタイルシートで指定。 |
|
||||||||||
| valign="文字の上下位置" | 表の列(縦列)の文字上下位置 ※HTML5で廃止。スタイルシートで指定。 |
| ||||||||||
| width="列幅" | 表の列(縦列)の幅（ピクセル、パーセント） ※HTML5で廃止。スタイルシートで指定。 | |||||||||||
| 廃止された属性 |
| |||||||||||
| グローバル属性 |
| |
| イベント属性 |
| |
<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>
<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>
| 氏名 | 国語 | 理科 | 社会 | 合計（平均） |
|---|---|---|---|---|
| 山田 太郎 | 98 | 62 | 87 | 247 (82.3) |
| 鈴木 花子 | 85 | 71 | 58 | 214 (71.3) |
| 斉藤 一郎 | 66 | 65 | 52 | 183 (61.0) |
スタイルシート(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>
<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>
| 氏名 | 国語 | 理科 | 社会 | 合計（平均） |
|---|---|---|---|---|
| 山田 太郎 | 98 | 62 | 87 | 247 (82.3) |
| 鈴木 花子 | 85 | 71 | 58 | 214 (71.3) |
| 斉藤 一郎 | 66 | 65 | 52 | 183 (61.0) |
留意事項
広告