| 表：行と列のグループ化 |
|
行をグループ化する |
<thead> <tfoot> <tbody> |
|
これらのタグは、表の内容を行単位でグループ化します。表は、「ヘッダ部分」「フッタ部分」「本体部分」の３つのグループに分けることができます。
これらをグループ化することによって、グループ単位で属性の設定やスタイルシートの設定ができるようになります。 |
|
■ヘッダ部分 <thead>～</thead> |
<thead>タグに囲まれた部分がヘッダ部分になります。このタグは、表内に1つだけ配置できます。 |
■フッタ部分 <tfoot>～</tfoot> |
<tfoot>タグに囲まれた部分がフッタ部分になります。このタグは、表内に1つだけ配置できます。 |
■本体部分 <tbody>～</tbody> |
<tbody>タグに囲まれた部分が本体部分になります。このタグは、表内に必要な数だけ配置することができます。 |
【記述する順番】 |
<thead>（ヘッダ部分）、<tfoot>（フッタ部分）、<tbody>（本体部分）の順に記述します（ブラウザでは、「ヘッダ部分 → 本体部分 → フッタ部分」の順序で表示します）。 |
<caption>タグや<colgroup>（<col>）タグを使用している場合は、これらのタグの後に<thead>～<tbody>タグを配置します。 |
|
| 【参考】 関連するページ |
 |
◆「テーブル作成に使用するタグとその記載順位」を掲載しています。 |
|
|
【記述例】 |
|
| ☆グループ化の基本構成 |
|
☆<caption>タグを使用する場合 |
| |
<table>
<thead>
<tr><td>ヘッダ部</td></tr>
</thead>
<tfoot>
<tr><td>フッタ部</td></tr>
</tfoot>
<tbody>
<tr><td>本体部</td></tr>
</tbody>
</table> |
<table>
<caption>タイトル</caption>
<thead>
<tr><td>ヘッダ部</td></tr>
</thead>
・
・
</table> |
|
<caption>タグは、<table>タグと
<thead>タグの間に記述します。 |
|
|
|
【グループ単位の属性指定】 |
＊ <thead>、<tfoot>、<tbody>タグに以下の属性を指定すると、セル内の文字の表示位置をグループ単位で指定できます。 |
align=""
(横方向) |
left | 左側に表示（td初期値） |
| center | 中央に表示（th初期値） |
| right | 右側に表示 |
| justify | 両端揃えで表示 |
|
vAlign=""
(縦方向) |
top | 上部に表示 |
| middle | 中央部に表示（初期値） |
| bottom | 下部に表示 |
| baseline | 1行目をベースラインで揃える |
|
|
＊ この他、これらのタグには、背景色や背景画像、文字サイズ（スタイルシート）などを指定します。 |
 HTML4.01 では <tbody>タグの指定が必須とされていますが、ヘッダとフッタが無い場合で、本体部分が１つしかない場合には、この<tbody>タグを省くことができます。 |
|
| ★ 使用例とブラウザでの表示 |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
<table border=1 width=250>
<caption style="Font-Size:16pt"><b>表-１ 県庁所在地</b></caption>
<thead bgColor=#80ffff>
<tr><th>都道府県名</th>
<th>県庁所在地</th></tr></thead>
<tfoot align=right style="Font-Size:10pt" bgColor=#c0c0c0>
<tr><td colSpan=2>― 北海道・東北編 ―</td></tr></tfoot>
<tbody align=center>
<tr><td>北海道</td><td>札幌市</td></tr>
<tr><td>青森県</td><td>青森市</td></tr>
</tbody></table> |
表-１ 県庁所在地
| 都道府県名 | 県庁所在地 |
|---|
| ― 北海道・東北編 ― |
| 北海道 | 札幌市 |
| 青森県 | 青森市 |
※ Opera は、<thead> <tfoot> <tbody>のbgColor属性に対応していません。 |
|
|
|
| 列をグループ化する |
<colgroup> |
|
<colgroup>タグで、表の内容を列単位でグループ化します。
列をグループ化すると、グループ単位で属性の設定やスタイルシートの設定ができるようになります。 |
|
<colgroup span="3" align="center"></colgroup> |
| span="" |
グループ化する列数を指定（初期値は 1） |
|
|
【列数の指定方法】 |
グループ化する列数は、<colgroup>タグのspan属性で指定するか、<colgroup>タグの中に<col>タグを配置して指定します。 |
① <colgroup>タグのspan属性で指定する場合
<colgroup span="2"></colgroup> … 2列をグループ化します。
<colgroup></colgroup> … spanを省略した場合は、1列をグループ化します。 |
② <col>タグのspan属性で指定する場合
<colgroup>
<col span="2" align="right"> … 2列を右寄せにします。
<col align="center"> … 1列を中央寄せにします（spanを省略した場合は、1列をグループ化）。
</colgroup> |
|
【記述する位置】 |
① <colgroup>タグは、<table>タグと<tr>タグの間に記述します。
② <caption>タグを同時に指定する場合は、<caption>タグの下に記述します。
③ 行のグループ化を同時に指定する場合は、<thead>（<tfood><tbody>）タグより上に記述します。 |
|
| 【参考】 関連するページ |
|
◆「テーブル作成に使用するタグとその記載順位」を掲載しています。 |
|
|
【記述例】 |
<table>
<caption>グループ化のサンプル</caption>
<colgroup span="1"></colgroup> … Ａグループ
<colgroup span="1" align="right"></colgroup> … Ｂグループ
<thead><tr><td>Ａグループ１</td><td>Ｂグループ１</td></tr></thead>
<tfoot><tr><td>Ａグループ２</td><td>Ｂグループ２</td></tr></tfoot>
<tbody><tr><td>Ａグループ３</td><td>Ｂグループ３</td></tr></tbody>
</table> |
|
【グループ単位の属性指定】 |
＊ <colgroup>タグに以下の属性を指定すると、セル内の文字の表示位置やセルの幅をグループ単位で指定できます。
指定例：<colgroup align=center valign=top width=100></colgroup> |
align=""
（横方向） |
left | 左側に表示（<td>初期値） |
Internet Exp.8 Firefox などは、この属性に対応していません。 |
| center | 中央に表示（<th>初期値） |
| right | 右側に表示 |
| justify | 両端揃えで表示 |
vAlign=""
（縦方向） |
top | 上部に表示 |
Internet Exp.8 Firefox などは、この属性に対応していません。 |
| middle | 中央部に表示（初期値） |
| bottom | 下部に表示 |
| baseline | 1行目をベースラインで揃える |
| width="" |
ﾋﾟｸｾﾙ数 or ％ |
グループに含まれる各列の幅を指定 |
|
|
| ★ 使用例とブラウザでの表示 |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
| <table border=1 width=250 height=160>
<colgroup align=center bgColor=#e0f0fc>
</colgroup>
<colgroup align=right></colgroup>
<thead><tr><th bgColor=white>名 称</th>
<th align=center>面 積</th>
<th>備 考</th></tr></thead>
<tfoot><tr><th>計</th><td>69.30</td>
<td><br></td></tr></tfoot>
<tbody><tr><td>和 室</td><td>26.40</td>
<td>客間</td></tr>
<tr><td>洋室１</td><td>23.10</td>
<td>ベッドルーム</td></tr>
<tr><td>洋室２</td><td>19.80</td>
<td>子供部屋</td></tr></tbody>
</table> |
| 名 称 | 面 積 |
備 考 |
|---|
| 計 | 69.30 |
|
|---|
| 和 室 | 26.40 | 客間 |
| 洋室１ | 23.10 | ベッドルーム |
| 洋室２ | 19.80 | 子供部屋 |
※ Firefox は、<colgroup>の align ･ vAlign ･ bgColor属性に対応していません。
※ Opera は、<colgroup><thead>～<tbody>のbgColor属性に対応していません。
|
|
|
※ ３列目の<colgroup>は未指定。
※ <thead>の１列目（名称）は背景色を"white"
に、２列目（面積）は"center"に再指定。
※ <tfoot>の<br>はセル枠を表示させるため。 |
|
☆ 背景色は、style="background-color:#e0f0fc;" などとすれば Internet Exp.以外でも機能します。 |
|
|
|
| 列単位で属性を設定する |
<col> |
|
<col>タグで、表の列（縦列）の属性をまとめて設定します。このタグを使用すると、列単位で属性やスタイルシートが設定できるようになります。
※ <colgroup>とほぼ同じ機能ですが、終了タグ（</col>）はありません。 |
|
<col span="3" align="center"> |
| span="" |
まとめる列数を指定（初期値は 1） |
|
|
【列数の指定方法】 |
まとめる列数は、<col>タグのspan属性で指定します。 |
<col span="2" align="right"> … 2列を右寄せにします。
<col align="center"> … 1列を中央寄せにします（spanを省略した場合は、1列をまとめる）。 |
|
【記述する位置】 |
① <col>タグは、<table>タグと<tr>タグの間に記述します。
② <caption>タグを同時に指定する場合は、<caption>タグの下に記述します。
③ 行のグループ化を同時に指定する場合は、<thead>（<tfood><tbody>）タグより上に記述します。
※ <col>タグは、<colgroup>タグの中で使用することもできます。
<colgroup width=120> … 幅の指定（２列分）
<col align=center> … 1列目を中央寄せ
<col align=right> … 2列目を右寄せ
</colgroup> |
|
|
【記述例】 |
<table>
<caption>グループ化のサンプル</caption>
<col span="1" align="center"> … Ａグループ
<col span="1" align="right"> … Ｂグループ
<thead><tr><td>Ａグループ１</td><td>Ｂグループ１</td></tr></thead>
<tfoot><tr><td>Ａグループ２</td><td>Ｂグループ２</td></tr></tfoot>
<tbody><tr><td>Ａグループ３</td><td>Ｂグループ３</td></tr></tbody>
</table> |
|
【列単位の属性指定】 |
＊ <col>タグに以下の属性を指定すると、セル内の文字の表示位置やセルの幅を列単位で指定できます。
指定例：<col align=center valign=top width=100> |
align=""
（横方向） |
left | 左側に表示（<td>初期値） |
Internet Exp.8 Firefox などは、この属性に対応していません。 |
| center | 中央に表示（<th>初期値） |
| right | 右側に表示 |
| justify | 両端揃えで表示 |
vAlign=""
（縦方向） |
top | 上部に表示 |
Internet Exp.8 Firefox などは、この属性に対応していません。 |
| middle | 中央部に表示（初期値） |
| bottom | 下部に表示 |
| baseline | 1行目をベースラインで揃える |
| width="" |
ﾋﾟｸｾﾙ数 or ％ |
各列の幅を指定 |
|
|
| ★ 使用例とブラウザでの表示 |
|
| 使 用 例 |
|
ブラウザの表示 |
|---|
| |
| <table border=1 width=250 height=160>
<col align=center bgColor=#e0f0fc>
<col align=right>
<thead><tr><th bgColor=white>名 称</th>
<th align=center>面 積</th>
<th>備 考</th></tr></thead>
<tfoot><tr><th>計</th><td>69.30</td>
<td><br></td></tr></tfoot>
<tbody><tr><td>和 室</td><td>26.40</td>
<td>客間</td></tr>
<tr><td>洋室１</td><td>23.10</td>
<td>ベッドルーム</td></tr>
<tr><td>洋室２</td><td>19.80</td>
<td>子供部屋</td></tr></tbody>
</table> |
| 名 称 | 面 積 |
備 考 |
|---|
| 計 | 69.30 |
|
|---|
| 和 室 | 26.40 | 客間 |
| 洋室１ | 23.10 | ベッドルーム |
| 洋室２ | 19.80 | 子供部屋 |
※ Firefox は、<col>の align ･ vAlign ･ bgColor属性に対応していません。
※ Opera は、<col><thead>～<tbody>のbgColor属性に対応していません。
|
|
|
※ ３列目の<col>は未指定。
※ <thead>の１列目（名称）は背景色を"white"
に、２列目（面積）は"center"に再指定。
※ <tfoot>の<br>はセル枠を表示させるため。 |
|
☆ 背景色は、style="background-color:#e0f0fc;" などとすれば Internet Exp.以外でも機能します。 |
|
|
|
