|
複数の列に対して まとめて属性を設定してみましょう。
前回の colgroup のお話とよく似ていますが、
colgroup は 列を構造的な意味でグループ化させるための要素。
col は 列に対して スタイルシートや 属性をまとめて設定するためのもの。
と 覚えてください ややこしいですが 意味合いが違うだけであって
設定できる属性は 同じです。
あと col で 属性を指定した場合は colgroup で 指定した場合よりも
優先されて 表示されるようになります。
まずは colgroup で 列をグループ分けした状態です。
下のテーブルを見てください。
| １ |
２ |
３ |
４ |
５ |
| １ |
２ |
３ |
４ |
５ |
| １ |
２ |
３ |
４ |
５ |
これは３行５列のテーブルです。
１列目は 幅 20ピクセル
２、３、４列目は 幅 100ピクセルで 中央揃えに
５列目は 幅 50ピクセルで 右揃えに指定しています。
HTMLソースは こんな感じです。
<table border="1">
<colgroup width="20"></colgroup>
<colgroup span="3" width="100" align="center"></colgroup>
<colgroup width="50" align="right"></colgroup>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
<td>４</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
<td>４</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
<td>４</td>
<td>５</td>
</tr>
</table> |
<colgroup> 〜 </colgroup> の間に何もはいっていませんので
</colgroup> の 存在する意味がないのでは？ なんて思う人もいるかもしれませんね。
そこで この中に col のタグを入れてみます。
| <table border="1">
<colgroup>
<col width="50"
<
/colgroup>
<colgroup>
<col span="3" width="100" align="center">
</colgroup>
<colgroup>
<col
width="50" align="right">
< /colgroup>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
<td>４</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
<td>４</td>
<td>５</td>
</tr>
<tr>
<td>１</td>
<td>２</td>
<td>３</td>
<td>４</td>
<td>５</td>
</tr>
</table>
|
col が 入ったときの感じです。
| １ |
２ |
３ |
４ |
５ |
| １ |
２ |
３ |
４ |
５ |
| １ |
２ |
３ |
４ |
５ |
タグの設定はちがうんですが、見栄えは同じですね。
colgorup と col の違いが理解できたでしょうか？
余計に解りづらかったりして(;^_^A
|
