カスタム検索

サイトマップ

トップページ

HTML/XHTML

<colgroup>タグ

<colgroup>タグの機能と属性
機能		テーブルの列グループを定義する
属性	HTML-4.01	コア言語イベント span width align valign char charoff
属性	XHTML-1.0	コア言語イベント span width align valign char charoff

<colgroup>タグは、テーブルの列グループ（縦方向）を定義します。<thead>、<tbody>、<tfoot>タグが行（横方向）のセクションに区切るのに対し、<colgroup>タグは縦方向に区切ります。

また、<thead>タグ等はテーブル内（<tr>の前と</tr>の後）に記述していきますが、<colgroup>タグは<thead>、あるいは最初に登場する<tr>タグより前に記述します。

<colgroup>タグは、<col>タグをネストしてより細やかな列（縦方向）の定義をすることができます。

<colgroup>にネストされるタグ
タグ名	機能	詳細
<col>	列グループの中で列を定義する	詳細

<colgroup>と<col>タグを指定しても機能しないブラウザもありますし、<td>や<th>でcolspan属性を指定していると思ったような表現ができないこともあります。現段階ではあまり使用されていないタグだと思います。

span属性

span属性は、列をグループ化したい列の数を指定します。

下の例はspan属性の値に2を指定し、2つの列をグループ化しています（効果が分かるようにCSSで背景色を指定しています）。

colgroup.html


<html>
    <head>
        <title>&lt;colgroup&gt;タグの例</title>
    </head>
    <body>
        <table border="1">
            <caption>製品別スペック</caption>
            <colgroup span="2" style="background: #ccc">
            </colgroup>
            <tr>
                <th colspan="2"><br /></th>
                <th colspan="2">計測データ</th>
            </tr>
            <tr>
                <th colspan="2">製品名</th>
                <th>温度／時間</th>
                <th>変化</th>
            </tr>
            <tr>
                <th rowspan="2">プラチナール</th>
                <th>EX</th>
                <td>100度／1</td>
                <td>なし</td>
            </tr>
            <tr>
                <th>LE</th>
                <td>100度／1</td>
                <td>0.5mm膨張</td>
            </tr>
            <tr>
                <th rowspan="2">ゴールドール</th>
                <th>EX</th>
                <td>80度／1</td>
                <td>なし</td>
            </tr>
            <tr>
                <th>LE</th>
                <td>80度／1</td>
                <td>1mm膨張</td>
            </tr>
        </table>
    </body>
</html>