colgroup要素

TOPページに戻る > html入門

colgroup要素

colgroup要素は表の縦の列をグループ化します
table要素内に、caption要素がある場合、その次にcolgroup要素を記述します。caption要素がない場合はtable要素の下に書きます。colgroup要素の内容は空でも大丈夫です
グループ分けするときはspan属性を使います。値にはグループ化する列の数をいれます。span属性の値を2にすると縦2列をグループ化できます
グループ化した後にcssでスタイルを指定するとグループ化した内容のスタイルをまとめて指定できます
colgroup要素はtable要素内で複数使用できます
col要素を子要素として内容にすることができます
※colgroup要素は省略可能です。縦の列をグループ化しない場合はtable要素内に記述する必要はありません

使い方（書式）

<colgroup></colgroup>

colgroup要素

対応ブラウザ
要素の種類	table要素の子要素
内容となる要素	col要素

属性	説明
span属性	colgroup要素でまとめる列数を整数で指定します。span属性の初期値は 1です 例、span="2" この場合は縦の2列をグループ化しまします
width属性	colgroup要素でまとめたグループ内のセルの横幅を指定します 値にはpxなどの単位、% ※cssのwidthプロパティでも横幅を指定できます
align属性	colgroup要素で指定したグループのセルのテキストの横の表示位置を指定します 値にはleft、right、center、justify、char
valign属性	colgroup要素で指定した列のセルのテキストの縦の表示位置を指定します 値にはtop、middle、bottom、baseline
char属性	tfoot要素の内容になっているセルの内容の位置揃えとなる文字を指定します 対応しているブラウザはありません HTML5で廃止されました
charoff属性	char属性で位置揃えが指定された場合、charoff属性でその文字から水平方向に位置をずらして表示します 対応しているブラウザはありません HTML5で廃止されました
共通属性	html共通属性
イベント属性	htmlイベント属性

実際の指定方法

html

<table>
<caption>表の題名 caption</caption>
<colgroup span="2" class="hoge"></colgroup>
<thead>
<tr>
<td>theadの行</td>
<td>theadの行</td>
<td>theadの行</td>
</tr>
</thead>
<tfoot>
<tr>
<td>tfootの行</td>
<td>tfootの行</td>
<td>tfootの行</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>tbodyの行</td>
<td>tbodyの行</td>
<td>tbodyの行</td>
</tr>
</tbody>
</table>

css

.hoge{ background-color: #FFFACD; } /* 背景色を指定 */

実際の表示

表の題名 caption

theadの行	theadの行	theadの行
tfootの行	tfootの行	tfootの行
tbodyの行	tbodyの行	tbodyの行

その他のデザインはcssでスタイルを指定