*table 要素型 (HTML, XHTML 1)

[14] [DFN[[CODE(HTMLe)[table]] 要素]]は、[DFN[[[表]]]]です。

表とは、データを二次元的に
[WEAK[(三次元以上のものを二次元に射影したものも含む。)]] 組織化したものです。

仕様書: [HTML 4]
<IW:HTML4:"struct/tables.html">

[13]
:[[開始タグ]]:必須
:[[終了タグ]]: 必須
:[[内容模型]]:[CODE(SGML)[([CODE(HTMLe)[[[caption]]]]?, ([CODE(HTMLe)[[[col]]]]* | [CODE(HTMLe)[[[colgroup]]]]*), [CODE(HTMLe)[[[thead]]]]?, [CODE(HTMLe)[[[tfoot]]]]?, [CODE(HTMLe)[[[tbody]]]]+)]]
:出現できる文脈:[CODE(SGML)[%[[block]];]] な文脈
:[[属性]]:
,[CODE(HTMLa)[[[align]]]],,,揃え,[HTML4] 非推奨
,[CODE(HTMLa)[[[bgcolor]]]],[CODE(SGML)[%[[Color]]]],,背景色,[HTML4] 非推奨
,[CODE(HTMLa)[[[border]]]],[CODE(SGML)[%[[Pixels]]]],,枠幅,[HTML4]
,[CODE(HTMLa)[[[cellspacing]]]],[CODE(SGML)[%[[Length]]]],,こま間隔,[HTML4]
,[CODE(HTMLa)[[[cellpadding]]]],[CODE(SGML)[%Length]],,こま余白,[HTML4]
,[CODE(HTMLa)[[[class]]]]	,	,	,[[級]]	,[HTML4] %[[coreattr]]
,[CODE(HTMLa)[[[datafld]]]],,,,[HTML4] 予約
,[CODE(HTMLa)[[[dataformatas]]]],[CODE(SGML)[[CODE(HTML)[[[plaintext]]]] | [CODE(HTML)[[[html]]]]]],,,[HTML4] 予約
,[CODE(HTMLa)[[[datapagesize]]]],,,,[HTML4] 予約
,[CODE(HTMLa)[[[datasrc]]]],[CODE(SGML)[%[[URI]]]],,,[HTML4] 予約
,[CODE(HTMLa)[[[dir]]]]	,	,	,[[書字方向]]	,[HTML4] %[[i18n]]
,[CODE(HTMLa)[[[frame]]]],,,枠,[HTML4]
,[CODE(HTMLa)[[[id]]]]	,	,	,一意識別子	,[HTML4] %coreattr
,[CODE(HTMLa)[[[lang]]]]	,	,	,[[自然言語]]	,[HTML4] %i18n
,[CODE(HTMLa)[[[xml]]:lang]]	,	,	,自然言語	,[XHTML1]
,[CODE(HTMLa)[[[onclick]]]]	,	,	,	,[HTML4] %[[events]]
,[CODE(HTMLa)[[[ondblclick]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeydown]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeypress]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onkeyup]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmousedown]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmousemove]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseout]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseover]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[onmouseup]]]]	,	,	,	,[HTML4] %events
,[CODE(HTMLa)[[[rules]]]],,,,[HTML4]
,[CODE(HTMLa)[[[style]]]]	,	,	,スタイル情報	,[HTML4] %coreattr
,[CODE(HTMLa)[[[summary]]]],[CODE(SGML)[%[[Text]]]],(なし),目的・構造,[HTML4]
,[CODE(HTMLa)[[[title]]]]	,	,	,注釈的題	,[HTML4] %coreattr
,[CODE(HTMLa)[[[width]]]],[CODE(SGML)[%[[Length]]]],,幅,[HTML4] おすすめしない

** レンダリング

[15] HTML 4 仕様書は、次のようなレンダリング例を挙げています。

- [CODE(HTMLa)[summary]] 属性を利用者が見れるようにする
- [CODE(HTMLe)[caption]] があればそれをレンダリング
- [CODE(HTMLe)[thead]] や [CODE(HTMLe)[tfoot]] があれば、
それをどこにレンダリングするのか UA はしらないといけない。
-- 頁媒体で表が複数頁に亘るなら、各頁にレンダリング
-- Scroll 表示するなら、その前後にレンダリング
- [[行群]]指定があればそれに従ってレンダリング
- 行や列やこまは集団化指定に従って適切にレンダリング
- 視覚的 UA は HTML の属性や[[スタイル・シート]]の指定に従うべき
- 全体の到着を待ちつつ順次レンダリング

UA が1パスで表を表示するためには、[[行]]を明示し ([CODE(HTMLe)[[[col]]]]),
幅を指定しなければなりません ([CODE(HTMLa)[[[width]]]])。

表の方向については [CODE(HTMLa)[[[dir]]]] 属性の解説を参照。

[[#comment]]

**歴史
[21]
,1993年3月28日,      ,仕様案,おそらく最初の提案
,1993年6月24日,      ,仕様案,HTML+ DTD
,1993年7月13日,      ,仕様案,HTML+ DTD (この頃、ブロック水準要素がこま内容に認められる)
,1993年9月10日,      ,仕様案,HTML+ ([CODE(HTMLe)[tbl]] から [CODE(HTMLe)[table]] に改名)
,1993年9月    ,      ,実装  ,(この頃、 NCSA (Mosaic) や SoftQuad (HoTMetaL PRO) で実装実験)
,1993年11月8日,単純表,仕様案,HTML+ Discussion Document
,1994年1月5日 ,単純表,仕様案,HTML+ DTD (この頃、 [CODE(HTMLe)[tr]] が包含子に)
,1994年12月20日,単純表,実装  ,[[NCSA Mosaic]] 2.0 Alpha 8 [SRC[>>23]]
,1995年3月28日,単純表,仕様案,[[HTML 3.0]] [[I-D]] 00
,1995年4月    ,単純表,実装  ,[[NN]] 1.1
,1995年7月7日 ,複雑表,仕様案,html-tables I-D 00 (後の RFC 1942)
,1995年8月    ,単純表,実装  ,とりあえず実装した [[WinIE]] 1.0
,1995年10月   ,単純表,実装  ,[[WinIE 2.0]]b 本格実装
,1996年1月23日,複雑表,仕様案,WD-tables [CITE[The HTML3 Table Model]] (後の RFC 1942)
,1996年5月5日 ,単純表,仕様案,[[HTML 3.2]] Draft
,1996年5月    ,複雑表,実装  ,[[WinIE 3.0]]a1
,1996年3月    ,複雑表,仕様  ,[[RFC 1942]] [CITE[HTML Tables]]
,1996年12月   ,単純表,実装  ,[[Opera]] 2.1
,1997年1月14日,単純表,仕様  ,HTML 3.2 勧告 (最終版)
,1997年12月   ,複雑表,仕様  ,[[HTML 4.0]] [ABBR[FE][第1版]] 勧告
,1998年7月20日,単純表,実装  ,[[w3m]] の最初の表実装
,             ,複雑表,実装  ,[[Mozilla]] ([[Gecko]])
,2000年1月    ,複雑表,実装  ,Opera 4.0
,2001年4月10日,複雑表・単純表,仕様,[[XHTML m12n]] 1.0 [ABBR[FE][第1版]] 勧告

- 参考: <http://slashdot.jp/comments.pl?sid=81655&cid=280883>
- [23] [CITE[NCSA Mosaic History]] 
<http://www.ncsa.uiuc.edu/Divisions/PublicAffairs/MosaicHistory/history.html>

[7] [CODE(HTMLe)[table]] を最初に実装したのは [[NN]] だと思ってる人は多いけど、
実はそうじゃないんだなぁ。 (確かに普及させたのは NN だ。)

[22] 1993年3月に表機能を追加することが提案されています。

[CITE[EMail Msg <199303280705.AA25536@kauri.vuw.ac.nz>]] 
<http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q1.messages/278.html>

[[Dave Raggett]] は [[LaTeX]] や [[tbl]] (なに?) や [[Microsoft Word]]
を検討して、 L[SUP[A]]T[SUB[E]]X 染みた表モデルを提案しています。

[CITE[EMail Msg <9303311205.AA22020@manuel.hpl.hp.com>]] 
<http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q1.messages/293.html>

その後半年にわたる検討で [[CALS]]・[[ICADD]] 風の表モデルが採用されました。

[24] NCSA Mosaic 2.0 で表がちゃんと実装されているとしたら、
WinIE 1.0 の酷い実装ぶりは何なのかということになりますが、
NCSA Mosaic 2.0 の表の実装はどのような感じなのでしょうか?
[WEAK[あるいはその期間の他の mosaic variant はどうなのでしょう。]]

[[#comment]]

** 不思議解釈

[17] [CODE(HTMLe)[table]] は本来の表としてではなく、
頁の構成要素の[[配置]]のためだけに悪用されてきました。

しかし、そのような用途に使うと非図形的媒体での閲覧者にとっては意味のわからない情報になってしまいますし、
図形的媒体でも利用者が大きな画面での利用を強要されることになりかねませんから、
表を配置目的に使用するべきではありません。代わりに[[スタイル・シート]]が利用できます
[HTML 4]。

詳しくは[[テーブル・レイアウト]]を参照してください。

[19] 典型的レンダリングにおける [CODE(HTMLe)[[[form]]]] の余白を消すために
[CODE(HTMLe)[[[table]]]] 直下や [CODE(HTMLe)[[[tr]]]]
直下に [CODE(HTMLe)[form]] のタグを入れるという[Q[裏技]]
が不思議界では比較的良く知られていて、
信じられないことに世紀が変わった今でも愛用している人がいます。

[[#comment]]

** 例

[18] 比較的単純な表
[PRE(HTML)[
<TABLE border="1"
          summary="This table gives some statistics about fruit
                   flies: average height and weight, and percentage
                   with red eyes (for both males and females).">
<CAPTION>A test table with merged cells</CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Average
    <TH rowspan="2">Red<BR>eyes
<TR><TH>height<TH>weight
<TR><TH>Males<TD>1.9<TD>0.003<TD>40%
<TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>
]PRE]
(HTML 4 仕様書より)

レンダリング例:
[PRE[
          A test table with merged cells
    /-----------------------------------------\
    |          |      Average      |   Red    |
    |          |-------------------|  eyes    |
    |          |  height |  weight |          |
    |-----------------------------------------|
    |  Males   | 1.9     | 0.003   |   40%    |
    |-----------------------------------------|
    | Females  | 1.7     | 0.002   |   43%    |
    \-----------------------------------------/
]PRE]

他のレンダリング例: <IW:HTML4:"images/mergedcells">

[16] [[行群]]や[[列群]]を使った複雑な表
[PRE(HTML)[
<TABLE border="2" frame="hsides" rules="groups"
          summary="Code page support in different versions
                   of MS Windows.">
<CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<COLGROUP align="center" span="3">
<THEAD valign="top">
<TR>
<TH>Code-Page<BR>ID
<TH>Name
<TH>ACP
<TH>OEMCP
<TH>Windows<BR>NT 3.1
<TH>Windows<BR>NT 3.51
<TH>Windows<BR>95
<TBODY>
<TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*
<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X
<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X
<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X
<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X
<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X
<TBODY>
<TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X
<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X
<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X
<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X
<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X
</TABLE>
]PRE]
(HTML 4 仕様書より)

レンダリング例:
[PRE[
                  CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
===============================================================================
Code-Page | Name                         | ACP  OEMCP | Windows Windows Windows
    ID    |                              |            |  NT 3.1 NT 3.51    95
-------------------------------------------------------------------------------
   1200   | Unicode (BMP of ISO 10646)   |            |    X       X       *
   1250   | Windows 3.1 Eastern European |  X         |    X       X       X
   1251   | Windows 3.1 Cyrillic         |  X         |    X       X       X
   1252   | Windows 3.1 US (ANSI)        |  X         |    X       X       X
   1253   | Windows 3.1 Greek            |  X         |    X       X       X
   1254   | Windows 3.1 Turkish          |  X         |    X       X       X
   1255   | Hebrew                       |  X         |                    X
   1256   | Arabic                       |  X         |                    X
   1257   | Baltic                       |  X         |                    X
   1361   | Korean (Johab)               |  X         |            **      X
-------------------------------------------------------------------------------
    437   | MS-DOS United States         |        X   |    X       X       X
    708   | Arabic (ASMO 708)            |        X   |                    X
    709   | Arabic (ASMO 449+, BCON V4)  |        X   |                    X
    710   | Arabic (Transparent Arabic)  |        X   |                    X
    720   | Arabic (Transparent ASMO)    |        X   |                    X
===============================================================================
]PRE]

別のレンダリング例: <IW:HTML4:"images/table3">

[[#comment]]

** メモ
-[1] ''Tables in Netscape 1.1'' <http://wp.netscape.com/assist/net_sites/tables.html>
(HTML の標準化に関わっていない) 人々が見て, 学んだ、たぶん最初の table 要素の reference。
- [2] ''TABLE幅の計算方法'' <http://www.parkcity.ne.jp/~chaichan/qanda/qa3615.htm> 伝統的 [[HTML]] layout における [CODE(HTML)[TABLE]] 要素の幅の算出方法 (実装) について。
- [3] ''テーブルアート(HTMLタグ)のページ'' <http://hi.sakura.ne.jp/~okada/table/> [CODE(HTML)[TABLE]] 要素群と非推奨属性群を使って''絵''を描いたもの。手書きでやったらしい。よくやるのぅ。
- [4] >>3 こういう系 (他にも■とかの文字と [[font]] 要素を使って絵を描くのを見たことがある。) って、[[不思議マーク付け]]を超えて、 [CODE(HTML)[image/x-html+sgml]] とか名乗ったら良いと思う(w
- [5] >>3-4 いまや [[GIMP]] でも出来るらしい。 <http://www004.upp.so-net.ne.jp/iccii/gimp/startgimp-web.html>
- [6] ''w3mの開発について'' <http://www2u.biglobe.ne.jp/~hsaka/w3m/doc-jp/STORY.html>: [[w3m]] が盛り上がったのは[[テーブル・レイアウト]]のせいであったという衝撃の事実(w。 w3m の表レンダリング算法の解説もあって参考になろう。
-[[HTML+]]: ''Tables'' <http://www.w3.org/MarkUp/HTMLPlus/htmlplus_39.html>
-[[RFC 2070]] (HTML 2.[VAR[x]]) には表要素なし。
-''Table'' <http://www.blooberry.com/indexdot/html/tagpages/t/table.htm>: 表の実装は複雑なためか、怪しい不具合が一杯あったりします。その一部が紹介されています。
-HTML 3.0: ''Tables'' <http://www.w3.org/MarkUp/html3/tables.html>
-『The HTML3 Table Model』 W3C WD (1996/1/23) <http://www.w3.org/TR/WD-tables.html> (内容は RFC 1942 draft)。
-''diary07'' <http://homepage2.nifty.com/aito/BU/diary07.html#7/20>: [[w3m]] が table に対応。
- [11] >>3 ''【TABLE】テーブルアート 1【/TABLE】'' <http://pc2.2ch.net/test/read.cgi/hp/1049865199/>
- [8] ''Table Sorting'' <http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-notes/sort_rows.html>: [[DOM]]/[[JavaScript]] を使った表の [[sort]]。
- [9] 大昔、 [CODE(HTML)[TABLE]] 要素の出現してすぐの頃、 [CODE(HTML)[TABLE]] 未対応 [[UA]] では表系のタグがすべて無視されて、表の内容がつながって表示されてしまうという問題がありました。そのため、 [[tr]] 要素一つごとに [[br]] 要素を挿入するという[[裏技]]がありました。
- [10] >>9 [[section]] 要素的意味を持つ [[div]] 要素ごとに [[hr]] 要素を挿入するのも同じことだよなあ
- [12] [[テーブル・レイアウト]]は[[不思議マーク付け]]の真髄にして完成形。そして最終形態。
[[#comment]]

* メモ