table要素

説明

<table>-</table>　開始タグ:必須終了タグ:必須

テーブルの基本形は、<table>-</table>内に<tr><td>を配置した構造です。

文書作成者が、colgroup要素とcol要素を用いて列数および列幅の指定を行うことで、ブラウザは、テーブルのすべての情報が読み込まれる前にレンダリングを開始することができます。ただし、列幅に相対比指定[N*]が行われている場合は、参照するtable要素のwidth属性の固定幅が指定されていなければなりません。

属性 (W3C)

<table

H3- ie2- N1-

一般属性

id class style title lang dir %events;

summary="文章"

H4- N6-
音声や点字出力のための、表の概要を記述　

詳細

width="長さ"

H3- ie2- N2-
表幅
N(px)、S%で指定。

border="ピクセル"

H3- ie2- N1-
枠線の太さ
N(px)で指定。

frame="タイプ"

H4- ie3- N6-
枠線のタイプ　

rules="ルール"

H4- ie3- N7-
枠線のルール　

詳細
(none|groups|rows|cols|all)

cellspacing="長さ"

H3- ie2- N1-
セル外側の隙間
N(px)、S%で指定。

cellpadding="長さ"

H3- ie2- N1-
セル内の隙間
N(px)、S%で指定。

align="位置" (非推奨)

H3-x1 ie2- N2-
文字と表の位置関係　

詳細

left	表を左に浮動、右に文字を表示 (初期値)
center	表を中央に浮動、上下に文字を表示
right	表を右に浮動、左に文字を表示

bgcolor="色" (非推奨)

H4-x1 ie2- N3-
背景色

datasrc="URI"

H4- ie4-
未調査

datafld="CDATA"

H4- ie4-
未調査

dataformatas=
"(plaintext|html)"

H4- ie4-
未調査

datapagesize="CDATA"

H4- ie4-
未調査

>(caption?, (col*|colgroup*), thead?, tfoot?, tbody+)</table>

ブラウザ独自の属性 (ie N)

background="URI"	ie3- N4- 背景画像
bordercolor="色"	ie2- N4- 枠線の色
bordercolordark="色"	ie2- 枠線の暗い部分の色
bordercolorlight="色"	ie2- 枠線の明るい部分の色
bottompadding=""	N4 未調査
cols="数字"	ie3- N4- 列数
height="長さ"	ie2- N2- 表の高さ N(px)、S%で指定。
hspace="ピクセル"	N2- 表の左右の空白
leftpadding=""	N4 未調査
rightpadding=""	N4 未調査
toppadding=""	N4 未調査
vspace="ピクセル"	N2- 表の上下の空白

基本形

データ	データ
データ	データ


<table border="1">

<tbody>

<tr><td>データ</td><td>データ</td></tr>

<tr><td>データ</td><td>データ</td></tr>

</tbody>

</table>


<table border="1">

<tr><td>データ<td>データ

<tr><td>データ<td>データ

</table>

全体構造

表題
ヘッダ	ヘッダ	ヘッダ
フッタ	フッタ	フッタ
データ	データ	データ
データ	データ	データ


<table border="1">

<caption>表題</caption>

<colgroup span="1" width="100"></colgroup>

<colgroup span="2" width="100">

  <col span="1" width="80">

  <col span="1" width="60">

</colgroup>

<thead>

<tr><th>ヘッダ</th><th>ヘッダ</th><th>ヘッダ</th></tr>

</thead>

<tfoot>

<tr><td>フッタ</td><td>フッタ</td><td>フッタ</td></tr>

</tfoot>

<tbody>

<tr><td>データ</td><td>データ</td><td>データ</td></tr>

<tr><td>データ</td><td>データ</td><td>データ</td></tr>

</tbody>

</table>

thead要素、tfoot要素を用いる際には、省略可能な <tbody> も明示的に記述する必要があります。

テーブルテクニック

テーブルテクニック
CSSを用いたテーブルテクニック

W3Cの推奨においては、点字ブラウザや音声ブラウザユーザを配慮し、文書内容をレイアウトする目的のためにテーブルを用いるべきではないとされています。代わりにスタイルシート(CSS)を利用したレイアウトが求められています。

とはいえ、スタイルシートを完全にサポートしているブラウザは存在せず、加えてサポートがブラウザによりまちまちである現状において、スタイルシートのみによるレイアウトよりも、テーブルによるレイアウトの方が合理的なケースが多々あるのも事実です。W3Cの勧告を持ってそれを正しいHTMLとするのもよいのですが、場合によっては正しいHTMLにこだわらず合理的かつ柔軟なマークアップが必要とされます。

テーブルによるレイアウトに関する問題

W3Cの推奨においては、音声ブラウザや点字ブラウザなどの非視覚系メディアのレンダリングに際して問題を起こすことがあるため、単に文書内容をレイアウトする目的のためにテーブルを用いるべきではないとされています。さらに、大きなディスプレイのあるシステムで作成された固定幅のテーブルは、より小さなディスプレイで見た場合、横スクロールを強いられることもあります。こうした使いやすさ(アクセシビリティ)の問題を最小限に抑えるため、文書作成者は、文書のレイアウトにはテーブルの代わりに、スタイルシート(CSS)を利用することが求められています。

アクセシビリティの高いHTML文書の設計に関するより詳しい情報は、[WAI](英語)アクセシビリティ・ガイドラインを参照してください。

table要素 テーブル(表) (--table--)

説明

属性 (W3C)

ブラウザ独自の属性 (ie N)

基本形

全体構造

テーブルテクニック

テーブルによるレイアウトに関する問題

table要素テーブル(表) (--table--)