TABLEタグ・要素／テーブル・表領域
TABLEタグ・要素
TABLEタグ・要素とは
<table></table>タグとは作表の為のものです。
レイアウトに使用されることも多いのですが標準化団体であるW3Cが推奨していないことを覚えておいて下さいね。
ちなみに2014年勧告を目指すHTML5では、下記で解説しているHTML4では罫線用のborder属性は、表用途かレイアウト用途かを判定するフラグとして再定義、レイアウトでなく表であることを示す設定値は"1"、未設定はレイアウト用途とするものと定義されています。
table要素の子要素 caption/th/tr/td
尚、<table></table>には子要素として
- <caption></caption>タグ → 表の名前部分
- <th></th>タグ → 表の表題部分
- <tr></tr>タグ → 表の行部分
- <td></td>タグ → 表の各項目部分
の４つがあり、それぞれ役割をもっています。
更に<table></table>タグを含む<caption></caption>以外の３つと各要素は以下のような属性をもっています。
| 用途 | 属性 | table | TH | TR | TD |
|---|---|---|---|---|---|
| 要約 | summary属性 (or captionタグ) (何れか必須) | ○ | - | - | - |
| 巾指定 | width | ○ | ▲ | - | ▲ |
| 高さ指定 | height | ○ | ▲ | - | ▲ |
| 罫線の有無及び太さ | border | ○ | - | - | - |
| 背景色指定 | bgcolor | ▲ | ▲ | ▲ | ▲ |
| 背景に画像ファイルを指定 | background | ○ | ○ | ○ | ○ |
| 横方向の枠結合数指定 | colspan | - | ○ | - | ○ |
| 縦方向の枠結合数指定 | rowspan | - | ○ | - | ○ |
| 枠線巾指定 | cellspacing | ○ | - | - | - |
| 枠内マージン指定 | cellpadding | ○ | - | - | - |
| 横方向の位置指定 | align | - | ○ | ○ | ○ |
| 縦方向の位置指定 | valign | - | ○ | ○ | ○ |
| 枠内の自動改行なし指定 | nowrap | - | ▲ | - | ▲ |
| ○：設定可 ▲：設定可(今後なくなる可能性有) -：設定不可 | |||||
設定可となっている属性もその多くは、CSSでも設定可能、むしろCSSの方が適しているので非推奨となる可能性は十分にあり得ますし、たいていの場合、CSSで設定しておく方が後々の編集も楽です。
table要素の子要素 colgroup / col
更にtableタグ専用の関連タグには以下２つのタグがあります。
- <colgroup></colgroup>タグ → column group
- <col></col>タグ → column
列の要素・タグは、(th、)td なので colgroup 要素・タグ / col 要素・タグは、これらをまとめた指定を行う為の要素・タグということになります。
<table summary="">
<colgroup span="" width="">
<col span="" width="">
</colgroup>
<tr><td>...</td><td>...</td>・・・</tr>
</table>
何れも列数を整数値で指定する既定値 1 の span 属性とピクセル幅としての固定整数値(単位なし)/比率(%)/アスタリスク(*)による比例値で列幅を指定可能な width 属性という2つの属性を持ち、任意の複数列をまとめて列幅設定することができると共にCSSのセレクタや擬似要素、擬似クラスを利用することも可能です。
尚、col 要素・タグには、(省略可能ではなく、)終了タグは、ありません。
<table summary="">
<colgroup span="6" width="10">
<col span="5" id="">
<col id="">
</colgroup>
<tr><td>...</td><td>...</td>・・・</tr>
</table>
colgroup / col 要素・タグの span 属性は、指定されていなくても 1 が設定されているものとして扱われるので span 属性が指定されていない colgroup / col 要素・タグ1つは、列1つに対する指定と同様になります。
よって、この例では、6列めは、 span 属性のない2つめのcol要素・タグの指定が適用されることになります。
異なる列幅( width )など排他的な指定である場合、col 要素の両属性の指定は、colgroup 要素の両属性の指定を上書き、異なる span 属性値などは重複して適用されるので colgroup 要素の width 属性を 10 (px) と指定した span 属性値 6 ( 6列 )の内の col 要素で指定した span 属性値 3 ( 3列 )にidやclassを使ったスタイルを適用といった指定も可能です。
table要素の子要素 thead / tfoot / tbody
更にtable関連タグには、thead、tfoot、tbodyという３つの要素・タグがあります。
- <thead></thead>タグ → table header
- <tfoot></tfoot>タグ → table footer
- <tbody></tbody>タグ → table body
<table summary="">
<caption></caption>
<thead>
<tr><td></td>・・・</tr>
...
</thead>
<tfoot>
<tr><td></td>・・・</tr>
...
</tfoot>
<tbody>
<tr><td></td>・・・</tr>
...
</tbody>
<tbody>
<tr><td></td>・・・</tr>
...
</tbody>
</table>
これらを利用するとCSSでこの３つのタグ内に[style=""]、[id=""]、[class=""]などのスタイルを設定する事ができるようになります。
同様に[lang=""]、[dir=""]、[title=""]、[char=""]、[charoff=""]、[align=""]、[valign=""]やイベントを割り当てる事もできます。
名前からしてtfootが最後な気がするかもしれませんが、この３つのタグは、<table>タグに続けて<thead>、<tfoot>、<tbody>の順番で記述し、３つの各タグの間に<tr></tr>タグ、<th></th>タグ、<td></td>タグを記述します。
前述の<caption></caption>タグは、<table>タグと<thead>タグの間に記述します。
これら３つのタグにはそれぞれ最低１つの<tr></tr>タグが必要です。
逆に<th></th>タグは必須ではありません。
<tbody></tbody>タグは、<table></table>タグ内に複数あってもよいことになっています。
THEAD・TFOOT・TBODYタグは必須？
HTMLバージョンには、HTML4.0/4.01(、HTML5)があり、ホームページを記述する際にどういう型のものを作成するかを宣言するDOCTYPE宣言というものがありますが、その中に[loose.dtd][frameset.dtd][strict.dtd]の指定があります。
少なくともHTML4.01の最も厳密な記述を求める[strict.dtd]では<table>タグに<tbody></tbody>タグが必要な場合には<thead></thead>タグと<tfoot></tfoot>タグが記述必須となっています。
つまり、<table>タグに<tbody></tbody>タグが必要でない場合には、記述する必要はないということです。(W3C 11.2.3 Row groups: the THEAD, TFOOT, and TBODY elements)
TABLEサンプル
冒頭の対応表は実はtableタグを使って記述しており、その抜粋は以下の通りです。
|
<table summary="table関連属性の一例" border="1" bgcolor="#FFFFE0"> <tr> <th>用途</th><th>属性</th><th>table</th>th>TH</th><th>TR</th><th>TD</th> </tr> <tr> <th>巾指定</th><td>width</td><td align="center">○</td><td align="center">▲</td><td align="center">-</td><td align="center">▲</td> </tr> <tr> <th>高さ指定</th><td>height</td><td align="center">○</td><td align="center">▲</td><td align="center">-</td><td align="center">▲</td> </tr> <tr> <td width="" height="" rowspan="" colspan="6" align="right" valign="middle">○：設定可 ▲：設定可(今後なくなる可能性有) -：設定不可</td> </tr> </table> |
この記述では<table>開始タグで
|
◆ テーブル全体の枠線の幅を'1'に設定しています。 ※この指定は今後標準外となる可能性があります。 「="1"」を除いて「border」だけでも枠線がひけます。 ◆ 背景色を'#FFFFE0'(薄い黄色)を指定しています。 ※色数は限られますがyellow、blueなど色名指定もできます |
また、<table>タグの子要素として
|
◆ <th></th>タグを最上段一行目と一列目に使用しています。 ※THタグは何も指定しなくてもくくられた文字が『太字』・『中央揃え』となります。 ◆ <tr></tr>タグで各項目となる<td></td>タグを複数くくって「行」を構成しています。 |
また「行数」と「列数」は以下の通りです。
|
◆ 「行」は<tr></tr>タグの数となる4行設定しています。 ◆ 「列」は<th></th>タグ＋<td></td>タグの数となる6列設定しています。 ◆ 「行の」4行目は【○▲-】等の記号の説明行となっています。 |
また「行」の4行目の<td></td>タグでは
|
◆ 「巾」は記述していますが設定していません("")。 ◆ 「高さ」は記述していますが設定していません("")。 ◆ 「行の結合」は記述していますが設定していません("")。 ◆ 「列の結合」は枠を一つだけとしたいので'6'(列)を設定しています。 ◆ 一つにした「枠内での横方向の位置」は『右寄せ』を設定しています。 ◆ 「枠内での縦方向の位置」は『中央』に設定しています。 ※縦方向の位置はこの他に『上：top』と『下：bottom』があります。 |
のように様々な属性を設定しています。
尚、<th></th>タグが入ると覚えにくいかもしれませんのでくくる順番として外側から
|
A） <table></table>タグで<tr></tr>タグをくくり B） <tr></tr>タグで<th></th>や<td></td>をくくる |
と覚えると多少わかりやすくなるのではないでしょうか。
<table summary="">
<tr>
<th>要素</th><th>用途</th>
<td>table</td><td>表の作成</td>
</tr>
</table>
これを<body></body>タグの内側つまりボディ部に記述するので全体としては以下のようになります。
◆例題９
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd"> <!-- 必要に応じて doctype 変更 --> <html> <head> <title>テーブルテスト</title> </head> <body> <table summary=""> <tr> <th>要素</th><th>用途</th> <td>table</td><td>表の作成</td> </tr> </table> </body> </html> |
列や行を増やしたり、属性をいろいろと変えてみたりしていろいろチャレンジしてみて下さい。
関連リンク
各種HTMLとHTMLタグ／要素・属性・属性値
- HTML
- 【HTML】バージョン
- 【HTML4】
- 【HTML】HTML5
- 【HTML】HTML TAG／タグ
- 【HTML】doctype宣言
- 【HTML】htmlタグ
