このページについて
このページではHTMLで使えるtableタグ内で使用する、colgroupとcolの2つのタグについて解説をしています。
colgroupタグとcolタグ
この2つのタグはどちらもtableタグの中で使用します。大まかに機能をかくと、「縦方向の列(カラム)に対して一括でグループ化してスタイルシートなどを適用する」ということができるようになります。
まずcolgroupですが、これ自体は「縦の列をグループ化する」だけです。実際に個別に要素を加えるにはcolを使用します。
colはcolgroupの中でのみ使用できます。これで縦方向の列に対して一括でスタイルシートを適用できます。
colgroupタグとcolタグの書き方
colgroupを書く位置はおおよそ決まっていて、これはcaptionタグの後かつ、theadタグ・tbodyタグの前に書きます。そしてcolは常にcolgroupの中で使用します。これらを全て総合して書くと以下のようになります。
<table>
<caption>キャプション</caption>
<colgroup>
<col>
</colgroup>
<thead><tr><th>th1</th><th>2</th></tr></thead>
<tbody><tr><td>1</td><td>2</td></tr></tbody>
</table>これを実際にブラウザで表示するとこうなります。
| th1 | 2 |
|---|---|
| 1 | 2 |
ただし、このままでは全くと言っていいほど変化はありません。その理由はcolにあります。
colで指定した縦の列に対して何かしらの変化を与えるには、styleタグでスタイルシートを適用する必要があります。最も簡単なものだと「セルの背景色を変更」ですね。
<col style="background-color:red">これを先ほどのタグに適用するとこのようになります。
<table>
<caption>キャプション</caption>
<colgroup>
<col style="background-color: red;">
</colgroup>
<thead><tr><th>th1</th><th>2</th></tr></thead>
<tbody><tr><td>1</td><td>2</td></tr></tbody>
</table>これを実行すると一番左の縦列のみ、背景色が赤色に変わります。これを一括で複数の縦列に適用するには、以下で紹介するspan属性を使用します。
colgroupタグとcolタグで使える属性
colgroup、colもどちらも共通していてspan属性と、他のタグでも共通しているグローバル属性・イベント属性をサポートしています。
中でもspan属性はグループ分けをする時に使用するため抑えておきましょう。
<table>
<colgroup span="2" style="background-color:red"></colgroup>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>colgroupで使う場合、このように書きます。この場合は「縦2列をまとめて背景を赤くする」という書き方になります。
そしてcolで使う場合は以下のように書きます。
<table>
<colgroup>
<col span="2" style="backgournd-color:red">
</colgroup>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>このように書くと、「縦2列の背景を赤くする」という書き方になります。
どちらも縦2列を赤くするという書き方にはなりますが、colで指定するほうがより具体的に指定するという感じで覚えてもらうといいかなと思います。上のコードは以下のように書くことで、別の色を使用しつつ2列を別の列に変えることもできます。
<table>
<colgroup>
<col style="background-color:blue">
<col span="2" style="background-color:red">
</colgroup>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>このように後からcolとスタイルを付け加えるだけで、簡単に列の背景色を一括変更することができます。そして縦2列をこの表の2列目と3列目に移動させることができました。
このようにcolgroupとcolはそれぞれ似たような機能を持ちつつも、colgroupで全体的に指定するか・colで細かく指定するかという違いがあります。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。