9月
21

HTMLテーブルの列(縦)を構造的にグループ化する <colgroup span=”">

テーブルを操作する際に、各セルに対応するものは<th>や<td>がありました。
各行に対するものは<tr>や<thead>、<tbody>、<tfoot>などがあります。
ここではさらに列(縦)に対しての意味的(構造的)なグループ化を行い、操作やスタイルの適用に便利にするためのタグを紹介します。
よく似たタグにテーブルの列(縦)のグループ化をする <col>があります。



テーブルの列(縦)の構造的にグループ化する <colgroup>

<colgroup>

span

テーブルの列(縦)の構造的にグループ化する
テーブルの縦向きの列をグループ化するために<colgroup>を使います。
これにより、スタイルを指定する場合など列ごとに指定できるようになります。
<colgroup>は複数の列を意味的な括りでまとめることができます。
その際、その内部には列数分の<col>を入れます。
その場合、”span”の属性を使って次のようにあらわします。
<colgroup span="3"><col /><col /><col /></colgroup>
※3列をグループ化
配置するのは<thead>より前の、セルの定義をする前の場所です。

<table>
<colgroup span="2"><col /><col /></colgroup><col />
<tr><td>A</td><td>D</td><td>1</td></tr>
<tr><th>B</td><td>E</td><td>2</td></tr>
<tr><th>C</td><td>F</td><td>3</td></tr>
</table>

例えば、
<colgroup>を使えば、簡単にグループに色を付けることが出来ます。


AD1
BE2
CF3


<col>との違い

同じようなものに<col>という単純な列のグループ化をするためのタグがあります。
<colgroup>は列を意味的なまとまりで(構造的に)グループ化しますが、
<col>は意味的な構造に関係なく、単純に列をグループ化します。

1 Comment to “HTMLテーブルの列(縦)を構造的にグループ化する <colgroup span=”">”

Leave a comment

↓サーバーを借りるなら↓
サーバーについてはこちら


↓ドメインをとるなら↓
ドメインについてはこちら

↓ネットショップを始めるなら↓

人気の記事