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

・タグの機能
テーブルを作成します。

・構成
内容モデル宣言概要
順指定要素 : <CAPTION>(任意選択) → <COL><COLGROUP>(任意選択の反復)
               → <THEAD>(任意選択) → <TFOOT>(任意選択) → <TBODY>(必須の反復)

開始 → 不可
終了 → 不可

DTD(注1)での記述

<!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 --
  >

<!ENTITY % Text "CDATA">

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

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

<!ENTITY % TFrame "(void|above|below|hsides|lhs|rhs|vsides|box|border)">

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

<!ENTITY % reserved "">

・サンプルコード
4種類のテーブルを表示します。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
body
{
    font-family: serif;
    font-size: 14px
}
-->
</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を確認してください。


Copyright(C) 2006-2011 CLAYPOT. All Rights Reserved.