6. 表を表わす要素

since 21st/Jan./2000 and last modified 23rd/Jan./2000

参照；HTML 4.01 Specification

TABLE要素は、表を表わしたい時に使う要素で、開始タグと終了タグの直前、直後で自動的に改行されるブロックレベル要素です。P要素の中には書けません。

1. 最小のTABLE；CAPTION要素、TR要素、TH要素、TD要素

TR要素で行を区切り、TH要素で行・列のタイトル、TD要素が普通の項目です。

<table summary="3行3列の小さい表の例">
<caption>小さい表の例</caption>
<tr>
 <th>一行目</th> <th>その一</th> <th>その二</th>
</tr>
<tr>
 <th>二行目</th> <td>内容1,1</td>   <td>内容1,2</td>
</tr>
<tr>
 <th>三行目</th> <td>内容2,1</td>   <td>内容2,2</td>
</tr>
</table>

【表示例】

これが表の基本的な構造です。

2. 表の属性

表の配置位置; align 属性

TABLE そのものの文書に対する配置を指定します。

align 属性を他の要素に用いる場合は、当該要素内の文字列を右寄せ、左寄せ、中央揃いなどに指定しますが、 TABLE 要素に用いる場合は、表自身の配置が指定されます。

align = left|center|right

• 非推奨属性です。
• left: 表が文書の左側に配置される。
• center: 表が文書の中央に配置される。
• right: 表が文書の右側に配置される。

align 属性は、下位互換のために過渡的定義されていますが、廃止予定の非推奨の属性です。 Transitional DTD には含まれますが、 Strict DTD には含まれません。

<p>
align="right" を与えたTABLEの表示例です。
</p>
<table summary="3行3列の小さい表の例" align="right">
  <caption>小さい表の例</caption>
  <tr>
   <th>一行目</th> <th>その一</th> <th>その二</th>
  </tr>
  <tr>
   <th>二行目</th> <td>内容</td>   <td>内容</td>
  </tr>
  <tr>
   <th>三行目</th> <td>内容</td>   <td>内容</td>
  </tr>
</table>

ここで云う align="right" のようなもののことを属性と呼びます。要素に対して属性を与える時には、当該の要素の開始タグの中に属性を記述します。

表の幅; width 属性

表全体の幅を指定できます。非推奨属性では有りませんが、CSSを利用したほうが望ましいでしょう。

<table summary="width属性の例" width="200">

この例では、幅 200pixel が指定されています。 width 属性値はピクセルかパーセントです。

<table summary="width属性の例" width="50%">

パーセント値では、その時点で表が利用できる横幅に対する比率が指定されます。上の例では、描画領域の横幅の半分が指定されています。

描画領域は CSS などで削減指定されている可能性がありますので、必ずしもウィンドウの横幅では有りません。

表の外枠線と罫羅線

ブラウザの既定値では、表に枠線は引かれない事になっています。そこで、TABLE要素に属性を指定して、枠線・罫線を引かせましょう。

<table summary="枠線を引いた表の例" frame="hsides">
 <caption>枠線を引いた表の例</caption>
 <tr>
  <td>frame属性<td>表の外枠線
 <tr>
  <td>rules属性<td>セルの間の区切り線（罫線）
 <tr>
  <td>border属性<td>枠線と罫線の太さ
</table>

開始タグ<TABLE>の中に記述してあるframe="hsides"とあるのが属性です。この例では、表の上端と下端に枠線が引かれるはずです。

【表示例】

frame = void|above|below|hsides|lhs|rhs|vsides|box|border

この属性は表の外枠線に関して、どの部分を表示させるかを指定するものです。

• void: 外枠線なし。既定値です。
• above: 上端のみ。
• below: 下端のみ。
• hsides: 上端と下端のみ。
• vsides: 左端と右端のみ。
• lhs: 左端のみ。
• rhs: 右端のみ。
• box: 周囲全て。
• border: 周囲全て。

rules = none|groups|rows|cols|all

この属性は表の中のどのセルを罫線で区切るのかを指定するものです。

• none: 罫線なし。既定値です。
• groups: 行グループや列グループの区切り目を線引き。（THEAD、TFOOT、TBODY要素や、COLGROUP、COL要素のこと。）
• rows: 行間を線引き。
• cols: 列間を線引き。
• all: 全ての行間・列間を線引き。

border = pixels

この属性は線幅のピクセル数を指定するものです。ピクセル数でしか指定できません。

この属性だけが指定されている場合、枠線と罫線は全て引かれます。

次の二行は同じ事を指しています。

<table border="2">
<table frame="border" rules="all" border="2">

また、border属性に値が入っていない場合は既定値で表示されます。次の二行は同じ事を指しています。

<table border>
<table frame="border" rules="all">

3. セルを表す要素の調整；TH要素、TD要素

セルの一つ一つの内容は、TH要素かTD要素の中に記述されます。ここではセルの表示を調整するために属性を使います。

<tr>
  <td align="center">中央寄せ指定あり</td>
  <td>指定無し。標準</td>
</tr>

上の例では、開始タグの中にalign="center"と記述されたTD要素の文字列は、ブラウザでは「セルの中央寄せ」に表示されます。

3-1. セルの結合；rowspan属性、colspan属性

連続して同じ物が入っているような表のマスを結合出来ます。

rowspan属性は縦方向の複数個のセルを結合し、colspan属性では横方向の複数個のセルを結合出来ます。

<table summary="これは中学三年生・二学期の時間割です（今適当に作りました）" border="1">
<caption>時間割</caption>
<tr>
 <td>&nbsp;</td><th>1</th><th>2</th><th>3</th>
</tr><tr>
  <th>木</th><td colspan="2">理科</td><td>数学</td>
</tr><tr>
  <th>金</th><td colspan="2">技術・家庭</td><td>社会</td>
</tr><tr>
  <th>土</th><td>英語</td><td>数学</td><td>国語</td>
</tr>
</table>

この例では、木曜日の1,2時間目と金曜日の1,2時間目のセルがそれぞれ結合されています。

属性値が符号無しの単なる数字の場合、引用符は省略可能です。しかし、XHTMLでは、引用符の省略は認められず、必ず「属性名="属性値"」でなければなりません。

TH要素かTD要素の開始タグの中にrowspan属性やcolspan属性を埋め込むことで、表のセル（表のマスメ）を結合出来ます。

rowspan="n" (n=0,1,2,3...)

縦方向のセルを結合する。rowspan=2とあれば、そのセルは表の縦方向2つ分のセルが結合したものになる。

colspan="n" (n=0,1,2,3...)

横方向のセルを結合する。colspan=2とあれば、そのセルは表の横方向2つ分のセルが結合したものになる。

colspan属性やrowspan属性の値が"0"である場合は、そのセルの位置から表の最後のセルまで一気に結合される。

3-2. align属性とvalign属性

セルの中の文字をセルの中でどの辺りに表示させるか調整できます。

align = left|center|right|justify|char

水平位置調整です。

• left|center|right ... 文字列を指定された位置に揃えます。
• justify ... 文字列の文字を横幅一杯に等間隔で配置します。
• char ...
  • 特定の文字（小数点、単位など）に揃えます。
  • 軸とする文字を指定する為の char 属性を併用します。
  • char 属性が指定されていない場合のデフォルトは、小数点のピリオドです。

valign = top|middle|bottom|baseline

垂直位置調整です。

これらの属性は、 COLGROUP 要素、 COL 要素、 TBODY 要素、 THEAD 要素、 TFOOT 要素、 TR 要素、 TH 要素、 TD 要素などの開始タグ中に書けます。

<table summary="これは中学三年生・二学期の時間割です（今適当に作りました）" border="1">
<caption>時間割</caption>
<tr>
 <td> </td><th>1</th><th>2</th><th>3</th>
</tr><tr align="center">
  <th>木</th><td colspan=2>理科</td><td>英語</td>
</tr><tr align="center">
  <th>金</th><td colspan=2>技・家</td><td>社会</td>
</tr><tr>
  <th>土</th><td>英語</td><td>数学</td><td>国語</td>
</tr></table>

この例では、木曜日と金曜日の行で文字列が各セルの中央寄せに指定されています。

【表示例】

<!-- align="char" の例-->
<table summary="表の例" border="1">
<cougroup>
  <col span="1">
  <col span="1" align="char" char="*">
</colgroup>
<tr>
  <th>物理定数</th><th>値</th>
</tr>
<tr>
  <th>Planck 定数 h/2π</th>
  <td>1.054 * 10E-27 erg/sec</td>
</tr>
<tr>
  <th>光の速さ c</th>
  <td>2.9979 * 10E+8 m/sec</td>
</tr>
<tr>
  <th>Boltsmann　定数 k</th>
  <td>8.617 * 10E-5 eV/erg</td>
</tr>
</table>

この例では、第二列の文字列が * を軸に縦方向に揃う筈です。

以上で表は最低限書ける筈ですが、出来れば次に挙げる三つの要素を使って、もっと構造を明白にしましょう。

NEXT>>

FC2>		モビット