Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)><colgroup>タグ

HTMLタグ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

<colgroup>…表の列をグループにする

使用タグ

HTMLタグ

<colgroup 属性="属性値">〜</colgroup>

開始タグと
終了タグ

開始タグは必須で
終了タグは省略可

内容となる
要素

col 要素もしくは、内容なし

対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

<colgroupl>タグを使えば、表の列のをグループ分することができます。 <colgroup>は、 <table>〜</table>の中の<caption>と、<tr>あるいは、<thead>より前に置いてください。

同じような働きのタグで <col>というタグがありますが、<colgroup>との違いは、 グループ化の意味があるかないかの違いです。<colgroup>はグループとして分ける意味があり、表の列の表示も変更できますが、<col>は表の列の表示を変更するだけで、グループ分けとしての意味を持ちません。グループ化して表の構造を明確にしたい場合は<colgroup>を使い、ただ属性を指定して表示を変更させたい場合は<col>を使いましょう。

また、<colgroup>タグの中に<col>タグを並べて指定することもできます。

属性と働き

属性 働き 指定できる値
span="列の数" グループ分けする列の数を指定 整数を指定します
span属性を指定しない場合は「span="1"」と見なされます
width="長さ" 列の幅を指定できます ピクセルを表す整数、パーセンテージ、相対値(ブラウザによっては対応していない)
align="横の表示位置" 列の中のセルの横方向の表示位置を指定できます

「left」(左揃え)、「center」(中央揃え)、「right」(右揃え)、「justify」(両端揃え)、「char」(特定の文字に位置を揃える)

valign="縦の表示位置" 列の中のセルの縦方向の表示位置を指定できます 「top」(上揃え)、「middle」(中央揃え)、「bottom」(下揃え)、「baseline」(ベースラインに位置を揃える)
char="位置を揃える文字"
対応ブラウザなし
列の中のセルの横の表示位置を揃える文字を指定します。 1文字指定
charoff="ずらす長さ"
対応ブラウザなし
char属性で桁揃え文字が指定されていた場合、その文字からどれくらい左右にずらして表示するかを指定します ピクセルを表す整数、パーセンテージ

使用例

記述例
<table border="1">

<caption>
国の人口ランキング
</caption>

<colgroup align="center">
<col width="100">
</colgroup>
<colgroup>
<col span="2" width="200">
</colgroup>

<tr>
<th>国名</th>
<th>人口</th>
<th>国土面積(km2)</th>
</tr>
<tr>
<td>A国</td>
<td>約30億人</td>
<td>約900万</td>
</tr>
<tr>
<td>B国</td>
<td>約5億人</td>
<td>約500万</td>
</tr>
<tr>
<td>C国</td>
<td>約3億人</td>
<td>約400万</td>
</tr>

</table>
↓
[ブラウザでの表示例]
ブラウザ
国の人口ランキング
国名 人口 国土面積(km2)
A国 約30億人 約900万
B国 約5億人 約500万
C国 約3億人 約400万

関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system