table要素
要素名 | バージョン | 開始タグ | 終了タグ | 分類/親 | 中身 |
---|---|---|---|---|---|
table | 3.2, 4.0, X1.0, X1.1 | 必須 | 必須 | %block; | (caption?, (col*|colgroup*), thead?, tfoot?, tbody+) |
属性名 | バージョン | 属性値 | 既定値 | 備考 |
---|---|---|---|---|
summary | 4.0, X1.0, X1.1 | %Text; | #IMPLIED | purpose/structure for speech output |
width | 3.2, (4.0), (X1.0) | %Length; | #IMPLIED | table width |
border | 3.2, (4.0), (X1.0) | %Pixels; | #IMPLIED | controls frame width around table |
frame | 4.0, X1.0, X1.1 | %TFrame; | #IMPLIED | which parts of frame to render |
rules | 4.0, X1.0, X1.1 | %TRules; | #IMPLIED | rulings between rows and cols |
cellspacing | 4.0, X1.0, X1.1 | %Length; | #IMPLIED | spacing between cells |
cellpadding | 4.0, X1.0, X1.1 | %Length; | #IMPLIED | spacing within cells |
align | (4.0), (X1.0) | %TAlign; | #IMPLIED | table position relative to window |
bgcolor | (4.0), (X1.0) | %Color; | #IMPLIED | background color for cells |
datasrc | %URI; | #IMPLIED | a single or tabular Data Source | |
datafld | CDATA | #IMPLIED | the property or column name | |
dataformatas | plaintext|html | plaintext | text or html | |
datapagesize | CDATA | #IMPLIED | reserved for possible future use |
共通属性 …… %coreattrs;, %i18n;, %events;
tableの解説
table要素は、表の大枠を規定する要素です。table要素の中には表題を示す caption要素 (一つ、なくても良い)、列について規定する colgroup要素もしくは col要素 (順不同でいくつでも、なくても良い)、データのヘッダ部を示す thead要素 (一つ、なくても良い)、フッタ部を示す tfoot要素(一つ、なくても良い)、データ本体を示す tbody要素(いくつあっても良いが一つ以上必須) がこの順で含まれ得ます。
……と言われた瞬間に悟ったことだろうと思いますが、テーブルは非常に複雑です。
table要素の属性はたくさんありますが、現在あるほとんどの属性は見栄えに関するもので、特に指定する必要のないものが大半です。
HTML4での最も重要な変更は summary属性です。音声や点字出力の環境で表を利用する際には、この属性の値が読み上げられたり点字出力されたりすることが期待されます。
border属性はテーブル枠の太さを指定します。良く <table border> と書かれることがありますが、これは古いドラフト仕様 (HTML+, HTML3.0) で枠線を描画するか否かの二者択一式になっていた名残です。現在では、TABLE border と書いた場合は TABLE frame="border" の略記とみなされます。
width属性は表全体の横幅を指定します。ピクセル数の指定も可能ですが、画面の小さい環境では邪悪な横スクロールバーが出るだけです。パーセンテージで指定しましょう。なお、この属性は非推奨とはされていませんが、表全体の横幅はスタイルシートで指定することが推奨されています。
時々間違える人がいますが、table 要素には height という名前の属性はありません (二大ブラウザは独自に対応しているようですが)。表の高さは内容量によって自動的に決まります。もっとも、スタイルシートで高さを指定することは可能で、優れたブラウザなら、中身が溢れるような場合はテーブルの中にスクロールバーを表示したりするかも知れません。
frame属性は、表の外枠の表示方法を規定します。h が Horizontal, v が Vertical の意であることを理解すれば属性値の意味は明白でしょう。
- void …… なし
- above …… 上のみ
- below …… 下のみ
- hsides …… 水平線のみ=上と下
- lhs …… 左と上下
- rhs …… 右と上下
- vsides …… 垂直線のみ=左右
- box …… マス状=四方全て
もう一つ "border" という属性値がありますが、これは "box" と同じです。過去のドラフト仕様にしたがって書かれた <TABLE border> との互換性のために用意されています。
rules属性は、表内部の罫線の表示法を規定します。
- none …… なし
- groups …… グループ間に線引き (各colgroup と 各tbodyの境に線引き)
- rows …… 行の間に線引き (横罫線のみ)
- cols …… 列の間に線引き (縦罫線のみ)
- all …… 全ての行間・列間に線引き (格子状)
cellspacing と cellpadding はそれぞれセル間の余白 (枠線がある時は枠線の太さ)、セル内の余白 (枠があるときは枠とデータとの間隔) を指定します。
align は表の配置を決定します。left や right を指定するとフロート化します。やはり非推奨です。
bgcolor はテーブル全体の背景色を指定できますが、この属性が HTML3.2 に存在しないことに注意して下さい。この背景色指定を認識しないブラウザもかなり存在します。迂闊な指定をすると、表内の文字全てが読めなくなることもあります。これまた非推奨です。
datasrc などは将来のバージョンで規定される可能性があるため、名前が予約されているものです。現時点で効力を発揮することはありません (ブラウザが独自に対応している可能性はありますが)。
- 「table要素」にコメントを書く