行のグループ化(構造化)

thead要素、tfoot要素、tbody要素で、各要素、tr要素を囲んで表の行をグループ化します。

thead要素
表のヘッダを定義します。

tfoot要素
表のフッタを定義します。tfoot要素はtbody要素の前に記述します。フッタには表の中で結果や合計など重要なデータを記述するため表の本体データ(tbody)を待たずに先にフッタを表示するためです。なお、ブラウザ上の表示は表の最も下の行に表示されます。

tbody要素
表の内容にあたる本体を定義します。

例)

<table>
<caption>商品別平均価格</caption>
<thead>
<tr><td>店名/商品名</td><td>A商品</td><td>B商品</td></tr>
</thead>
<tfoot>
<tr><td>平均価格</td><td>1000</td><td>2000</td></tr>
</tfoot>
<tbody>
<tr><td>A店</td><td>950</td><td>2050</td></tr>
<tr><td>B店</td><td>1050</td><td>1950</td></tr>
</tbody>
</table>

テーブルのグループ化。thead要素,tfoot要素,tbody要素

※table要素にwidth: 300px、tfoot要素にcolor: red;、td要素にborder: 1px solid #cdcdcd;を指定。

列のグループ化(構造化)

colgroup要素
colgroup要素は表の列を構造的にグループ化します。列をグループ化することでグループ単位で属性やスタイルシートを適用できます。ソースを置く場所は、colgroup要素はcaption要素の次、thead要素や tr要素の前。

例)

<table>
<colgroup style="background: #c0c0c0;"></colgroup>
<colgroup style="background: #eeeeee;"></colgroup>
<colgroup style="background: #eeeeee;"></colgroup>
<tr><td>AAA</td><td>BBB</td><td>BBB</td></tr>
<tr><td>AAA</td><td>BBB</td><td>BBB</td></tr>
<tr><td>AAA</td><td>BBB</td><td>BBB</td></tr>
</table>

テーブルのグループ化。colgroup要素

※table要素にwidht: 300px;、td要素にborder: 1px solid #c0c0c0;を指定。

上記のソースでは2行目のcolgroup要素はAAAの列、3,4行目のcolgroup要素でBBBの2列を指定し、背景色をAAAの列は#c0c0c0、BBBの2列を#eeeeeと指定しています。

colgroup要素にspan属性の値で列数を記述しない場合は1列を指定していることになり、列の指定順序は、ソースの上→下=表の左→右となります。

span属性
colgroup要素でグループ化する列数を指定するにはspan属性に列数を数字で記述します。

例)

<table>
<colgroup style="background: #c0c0c0;"></colgroup>
<colgroup span="2" style="background: #eeeeee;"></colgroup>
<tr><td>AAA</td><td>BBB</td><td>BBB</td></tr>
<tr><td>AAA</td><td>BBB</td><td>BBB</td></tr>
<tr><td>AAA</td><td>BBB</td><td>BBB</td></tr>
</table>

テーブルのグループ化。colgroup要素,span属性

※table要素にwidht: 300px;、td要素にborder: 1px solid #c0c0c0;を指定。

上記のソースでは2行目のcolgroup要素はAAAの列、3行目のcolgroup要素のspan属性の値でBBBの2列を指定し、背景色をAAAの列は#c0c0c0、BBBの2列を#eeeeeと指定しています。


col要素
col要素は指定した列に属性やスタイルを指定します。列数を指定するにはcolgroup要素と同じく、span属性に列数を数字で記述します。colgroup要素と異なるのはcolgroup要素で指定した列はグループ化の意味を持つのに対し、col要素で指定した列はグループ化の意味を持たない点です。

例)

<table>
<colgroup>
<col style="background: #c0c0c0;" />
<col span="2" style="background: #eeeeee;" />
</colgroup>
<tr><td>AAA</td><td>BBB</td><td>BBB</td></tr>
<tr><td>AAA</td><td>BBB</td><td>BBB</td></tr>
<tr><td>AAA</td><td>BBB</td><td>BBB</td></tr>
</table>

テーブルのグループ化。colgroup要素,col要素

※table要素にwidht: 300px;、td要素にborder: 1px solid #c0c0c0;を指定。


ページトップへ戻る



RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system