6. 表を表わす要素 -2-

since 21st/Jan./2000 and last modified 1st/Oct./2000

参照；HTML 4.01 Specification

4. 行グループ要素; THEAD要素、TFOOT要素、TBODY要素

表を更に構造化・グループ化しましょう。表の場合、第一行と最終行には特別な意味がある事が少なくありません。それを表わすのがこれらの三つの要素です。

THEAD要素、TFOOT要素

表の頭の数行、最後の数行に特別な意味がある場合、これらの要素で区別しておく。

（THEAD 内がヘッダで、 TFOOT 内がフッタ。）

TBODY要素

複数の行の内容が意味的に幾つかにグループ化できる場合、この要素で幾つにでもグループ化しておける。

TABLE 要素は THEAD , TFOOT, TBODY 要素しか子要素に含め得ません。

但し、 TBODY 要素は、 THEAD , TFOOT, TBODY 要素が何れも現れていない表の中に限り、開始タグ、終了タグが省略可能です。

THEAD 要素、TFOOT 要素、TBODY 要素は、何れもその内部に TR 要素しか取り得ません。

具体例を挙げてみましょう。

表の Header と Footer の他にも、A、B、C のグループと、α、β、γ のグループに分けられる場合です；

<table border="1">
<caption>1組と2組の得点</caption>
<thead>
     <tr><td><th>第一回<th>第二回<th>第三回</tr>
</thead>
<tfoot align="center">
     <tr><th>平均<th>8.7<th>5.7<th>7.7</tr>
</tfoot>
<tbody align="right">
     <tr><th>a<td>10<td>6<td>8</tr>
     <tr><th>b<td>8<td>8<td>7</tr>
     <tr><th>c<td>8<td>3<td>8</tr>
</tbody>
<tbody>
     <tr><th>α<td>9<td>6<td>7</tr>
     <tr><th>β<td>8<td>7<td>7</tr>
     <tr><th>γ<td>9<td>4<td>9</tr>
</tbody>
</table>

ヘッダ行が一行目に、フッタ行が最終行に来て、その間に内容行が描画されるはずですが、 NetscapeCommunicator4.x はそのように描画できません。

この例では、脚部の行に文字列の中央寄せ指定、内容の第1部の行グループに右寄せの指定がしてあります。

これらの要素によって、例えばヘッダ行とフッタ行を固定して、内容行だけスクロールするなどの実装が期待されます。が、I.E.5.5, Netscape6 供にこのような機能は有りません。

5. 列グループ要素; COLGROUP要素、COL要素

縦方向に並んだ列もグループ化出来ます。意味的にグループ化するときは COLGROUP 要素を使い、その構造的グループ内で更に属性の共有など意味的ではないグループ化を行う必要が有る場合に COL 要素を使います。

次の例では、横方向 10 列と、続く 20 列を意味的に分けて（構造化して）います。更に、最初の 10 列に渡って、一列毎の幅を 20 ピクセル、続く 20 列の一列毎の幅を 40 ピクセルにすると云う指定になっています；

<!--意味によるグループ化-->
<table>
<colgroup span="10" width="20"></colgroup>
<colgroup span="20" width="40"></colgroup>
...
</table>

COLGOURP の終了タグは省略可能です。

次の例では、左から 39 列目までの列は幅が 20 ピクセル、左から 40 列目の最後の列は幅が 15 ピクセルで文字の水平位置がセルの幅いっぱいに等幅に広がって表示されます；

<!--属性の共有を目的としたグループ化-->
<table>
<colgroup width="20">
  <col span="39">
  <col width="15" align="justify">
</colgroup>
...
</table>

COL 要素は開始タグのみの空要素です。

span 属性

• グループ化する横方向に並んだ列の個数。
• 省略されている場合は、一列だけを含むグループが指定される。
• COLGROUP要素の中に1つでも COL 要素が含まれている場合、 COLGROUP 要素の span 属性は無視されます。

width 属性

• 横方向の列の幅。
• 幅指定の単位はピクセルとパーセントと比率です。
• width=0* の場合、「列を表示し得る最小限の列幅」で表示される。
• COL 要素の width 属性の指定の方が COLGROUP 要素の width 属性よりも優先されます。

表の描画には時間が掛かります。最後の行まで計算し終わらないと、一つの列幅が算出できないからです。

そこで、 COL 要素で width 属性を与えておくとブラウザの処理過程が一回で済むことになり、結果描画速度が向上します。

【記述例】

<table summary="3行3列の小さい表の例" border="1" width="400">
<caption>小さい表の例</caption>
<colgroup>
  <col span="1" width="50">
</colgroup>
<colgroup>
  <col span="1" width="100">
  <col span="1" width="*">
</colgroup>
...
</table>

この例では、表全体が 400 ピクセル（ドット）で、第一列が 50px、第二列が 100px、そして残りの 400-50-100 = 250px が第三列の幅になるように指定して有ります。

【表示例】

次の場合、 10 列目までは各列の幅が 50 ピクセル（ドット）で、次の 5 列は各列が最小の幅 0* になるように設定されています。

<table>
<colgroup span="10" width="50">
<colgroup span="5" width="0*">
...
</table>

最後に、「四行八列」の表について具体的に考えましょう。

COLGROUP 要素を使って、「左から1列目」と「残り7列」を意味的に区別します。更に、後ろの7列に付いて COL 要素を使って見かけだけ二つのグループに分けてみます；

<table border>
 <colgroup span="1" align="left" width="70">
 </colgroup>
 <colgroup>
  <col span="4" width="50" align="left" valign="top">
  <col span="3" width="80" align="right" valign="bottom">
 </colgroup>
<thead>
 <tr>
   <td>1行目<br>first row
   <td>2列目<td>3列目<td>4列目<td>5列目<td>6列目<td>7列目<td>8列目
 </tr>
</thead>
<tbody>
 <tr>
   <td>2行目<br>thecond row
   <td>(2,2)<td>(2,3)<td>(2,4)<td>(2,5)<td>(2,6)<td>(2,7)<td>(2,8)
 </tr><tr>
   <td>3行目<br>third row
   <td>(3,2)<td>(3,3)<td>(3,4)<td>(3,5)<td>(3,6)<td>(3,7)<td>(3,8)
 </tr><tr>
   <td>4行目<br>fourth row
   <td>(4,2)<td>(4,3)<td>(4,4)<td>(3,5)<td>(4,6)<td>(4,7)<td>(4,8)
 </tr>
</tbody>
</table>

ここでは TR, TH, TD 要素の終了タグを省略しました。Netscape社製のブラウザは表示が乱れますので、省略しない方が安全です。次の表示例では全ての終了タグを省略していません；

TABLE要素に付いては他にも色々ありますが、ここで紹介した以外の属性などに付いてはCSSで指定するのが統一的で良いように思います。

FC2>		モビット