HTML - TABLE

Last Update 2006/10/11

TOP - HTML(HyperText Markup Language) - <TABLE>

・タグの機能

テーブルを作成します。

・構成

内容モデル宣言概要

順指定要素 :

<CAPTION>(任意選択) → <COL><COLGROUP>(任意選択の反復)
→ <THEAD>(任意選択) → <TFOOT>(任意選択) → <TBODY>(必須の反復)

タグの省略

開始 → 不可
終了 → 不可

DTD(注1)での記述

TABLE要素宣言

<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

・属性

id : HTMLドキュメント内の個々の要素をユニークに識別可能とする属性 class : スタイルシートのスタイルクラスを適用 style : インラインスタイルで、タグにスタイルを適用 title : 説明のためのタイトル lang : 言語コード dir : ブラウザが表示するテキストの方向 onclick : マウスのボタンをクリック(押した後すぐに放す)した場合にイベントが発生 ondblclick : マウスのボタンをダブルクリックした場合にイベントが発生 onmousedown : マウスのボタンを押した場合にイベントが発生 onmouseup : マウスのボタンを放した場合にイベントが発生 onmouseover : マウスポインタが、属性が指定されたHTML要素の表示領域内に進入した際にイベントが発生 onmousemove : マウスポインタが、属性が指定されたHTML要素の表示領域内を移動した際にイベントが発生 onmouseout : マウスポインタが、属性が指定されたHTML要素の表示領域から離れた際にイベントが発生 onkeypress : キーボードのキーを押した後放された際にイベントが発生

summary

属性機能 : テーブルの目的・コンテンツの概要
省略時値 : IMPLIED

width

属性機能 : テーブル幅の指定
省略時値 : IMPLIED

解説

テーブルの幅を指定します。ピクセルまたは画面幅に対する割合で指定します。

border

属性機能 : テーブル・セルの枠線指定
省略時値 : IMPLIED

解説

この属性に整数値を指定すると、テーブルの外周やセル間の枠線太さの指定となります。
0を指定すると枠線は消えます。

frame

属性機能 : テーブル外周の枠線状態指定
省略時値 : IMPLIED

解説

テーブル外周の枠線の描き方を指定できます。

void : 枠線無し above : 上辺 below : 底辺 hsides : 上底両辺 lhs : 左辺 rhs : 右辺 vsides : 左右両辺 box : 4辺 border : 境界線

rules

属性機能 : セル周りの境界線指定
省略時値 : IMPLIED

解説

テーブルのセル周りの境界線の指定をします。

none : 境界線無し groups : テーブル関連の他のタグによってグループ化された部分の境界線 rows : 行間の境界線(横線) cols : 列間の境界線(縦線) all : 全境界線

cellspacing

属性機能 : セル間の間隔
省略時値 : IMPLIED

解説

セル間及びセルと外周の間隔の値を指定します。0を指定すると境界線は最も細くなります。

cellpadding

属性機能 : セルとセル内コンテンツの間隔
省略時値 : IMPLIED

解説

セルとセル内部のコンテンツの間隔の値を指定します。

DTD(注1)での記述

TABLE要素の属性定義

<!ATTLIST TABLE -- table element -- %attrs; -- %coreattrs, %i18n, %events -- summary %Text; #IMPLIED -- purpose/structure for speech output-- width %Length; #IMPLIED -- table width -- border %Pixels; #IMPLIED -- controls frame width around table -- frame %TFrame; #IMPLIED -- which parts of frame to render -- rules %TRules; #IMPLIED -- rulings between rows and cols -- cellspacing %Length; #IMPLIED -- spacing between cells -- cellpadding %Length; #IMPLIED -- spacing within cells -- %reserved; -- reserved for possible future use -- datapagesize CDATA #IMPLIED -- reserved for possible future use -- >

Text(引数実体参照) の実体宣言

<!ENTITY % Text "CDATA">

Length(引数実体参照) の実体宣言

<!ENTITY % Length "CDATA" -- nn for pixels or nn% for percentage length -->

Pixels(引数実体参照) の実体宣言

<!ENTITY % Pixels "CDATA" -- integer representing length in pixels -->

TFrame(引数実体参照) の実体宣言

TRules(引数実体参照) の実体宣言

<!ENTITY % TRules "(none | groups | rows | cols | all)">

reserved(引数実体参照) の実体宣言

<!ENTITY % reserved "">

・サンプルコード

4種類のテーブルを表示します。

<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <TITLE>テスト</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <TABLE width="300" border="1" frame="box" rules="all" cellspacing="0" cellpadding="0"> <CAPTION>Table1</CAPTION> <TR> <TD>aaaaa</TD> <TD>bbbbb</TD> </TR> <TR> <TD>ccccc</TD> <TD>ddddd</TD> </TR> </TABLE> <BR> <TABLE width="40%" border="1" frame="hsides" rules="rows"> <CAPTION>Table2</CAPTION> <TR> <TD>aaaaa</TD> <TD>bbbbb</TD> </TR> <TR> <TD>ccccc</TD> <TD>ddddd</TD> </TR> </TABLE> <BR> <TABLE border="1" frame="vsides" rules="cols"> <CAPTION>Table3</CAPTION> <TR> <TD>aaaaa</TD> <TD>bbbbb</TD> </TR> <TR> <TD>ccccc</TD> <TD>ddddd</TD> </TR> </TABLE> <BR> <TABLE border="1" frame="box" rules="all"> <CAPTION>Table4</CAPTION> <TR> <TD>aaaaa</TD> <TD>bbbbb</TD> </TR> <TR> <TD>ccccc</TD> <TD>ddddd</TD> </TR> </TABLE> </BODY> </HTML>

注1)

DTD関連の記述はhttp://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd より引用しています(着色部)。
上記のDTDが最新のものとは限りません。
最新版はhttp://www.w3.org/TR/html4/strict.dtdを確認してください。