カスタム検索

<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>

width属性

width属性を指定すると、<colgroup>タグで定義した列のグループの全てのセルに対して、セルの幅を指定することができます。

CSSを使用すれば、このwidth属性と同等のことが可能ですので、セルの幅を指定する場合は、CSSを使用するようにしてください。

align属性

align属性を指定すると、<colgroup>タグで定義した列グループの全てのセルに対して、水平方向の位置揃えを指定することができます。

CSSを使用すれば、このalign属性と同等のことが可能ですので、水平方向の位置揃えを指定する場合は、CSSを使用するようにしてください。

valign属性

valign属性を指定すると、<colgroup>タグで定義した列グループの全てのセルに対して、垂直方向の位置揃えを指定することができます。

valign属性の詳細については、<tr>タグを参照してください。

char属性

char属性は、任意の1文字を基準として位置揃えをさせたい場合に使用します。小数や、価格の表示に適していると思います。値に任意の1文字(小数なら「.」)を指定すると、その文字を基準に位置揃えが行われます。

ただし、ほとんどのブラウザでは、この属性を指定しても機能しないようです。

charoff属性

charoff属性は、char属性の値で指定した文字までの文字数(オフセット値)を指定します。

ただし、ほとんどのブラウザでは、この属性を指定しても機能しないようです。

CopyLeft 2021 Webデザインレッスン プライバシーポリシー サイト管理者に連絡