* table 要素型 (HTML, XHTML 1) [14] [DFN[[CODE(HTMLe)[table]] 要素]]は、[DFN[[[表]]]]を表します。 表とは、データを二次元的に組織化したものです [WEAK[(三次元以上のものを二次元に射影したものも含みます。)]] 。 [25] 仕様書: - [[HTML 4]] -- -- [CITE[B.5 Notes on tables]] [13] :[[局所名]]:[CODE(HTMLe)[table]] :[[名前空間名]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] :[[開始タグ]]:必須 :[[終了タグ]]:必須 :[[内容模型]] (HTML 4):[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]]]] , ,境界線幅 ,W3C 勧告 ,[HTML 4] ,[CODE(HTMLa)[[[bordercolor]]]] ,[CODE(SGML)[%[[Color]]]] , ,境界線色 ,非標準 ,[CODE(HTMLa)[[[bordercolordark]]]] ,[CODE(SGML)[%[[Color]]]] , ,境界線色 (暗色) ,非標準 ,[CODE(HTMLa)[[[bordercolorlight]]]] ,[CODE(SGML)[%[[Color]]]] , ,境界線色 (明色) ,非標準 ,[CODE(HTMLa)[[[cellspacing]]]] ,[CODE(SGML)[%[[Length]]]] , ,こま間隔 ,[HTML4] ,[CODE(HTMLa)[[[cellpadding]]]] ,[CODE(SGML)[%Length]] , ,こま余白 ,[HTML4] ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)[[[cols]]]] , , , ,非標準 ,[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)[[[height]]]] , , ,高さ ,非標準 ,[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] おすすめしない ,[CODE(XMLa)[[[xmlns]]]] ,[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] 固定 ,== ,[[名前空間名]] ,W3C 勧告 ,[[XHTML m12n]] ** レンダリング [15] [[.//レンダリング]]を参照してください。 ** 歴史 [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版]] 勧告 - 参考: - [23] [CITE[NCSA Mosaic History]] [7] [CODE(HTMLe)[table]] を最初に実装したのは [[NN]] だと思ってる人は多いけど、 実はそうじゃないんだなぁ。 (確かに普及させたのは NN だ。) [22] 1993年3月に表機能を追加することが提案されています。 [CITE[EMail Msg <199303280705.AA25536@kauri.vuw.ac.nz>]] [[Dave Raggett]] は [[LaTeX]] や [[tbl]] (なに?) や [[Microsoft Word]] を検討して、 L[SUP[A]]T[SUB[E]]X 染みた表モデルを提案しています。 [CITE[EMail Msg <9303311205.AA22020@manuel.hpl.hp.com>]] その後半年にわたる検討で [[CALS]]・[[ICADD]] 風の表モデルが採用されました。 [24] NCSA Mosaic 2.0 で表がちゃんと実装されているとしたら、 WinIE 1.0 の酷い実装ぶりは何なのかということになりますが、 NCSA Mosaic 2.0 の表の実装はどのような感じなのでしょうか? [WEAK[あるいはその期間の他の mosaic variant はどうなのでしょう。]] [[#comment]] ** 設計について [25] HTML 表模型の設計に関する解説が HTML 4 B.5.1 にあります。それによれば、 HTML 表模型は、 - 次のものの研究から発展しています。 -- SGML 表模型 -- [RUBY[文書処理器] [ワープロ]]での表の扱い -- 雑誌、書籍、その他紙媒体での様々な表配置技術 - 単純な表は単純に、必要なら複雑な表も扱えるように設計されました。 -- 常用の文章編集器で HTML の表をマークできます。 -- [[学習曲線]]が緩くなります。 - [[こま]]の連結や揃えなどの表現特性のこま群への関連付けは他の文書書式からの変換や [[WYSIWTG]] 編集器での作成と相性が良いよう考慮しています。 [26] '''動的再書式付け''' [SRC[HTML 4 B.5.1.1]]。 HTML 表模型では、表の大きさや[[フォント]]などについて著者が制御しません。 ですから、列幅を絶対[[画素]]単位指定に依存するのは危険です。 よって、表は窓やフォントの大きさに合わせて動的に大きさを変更できなければなりません。 著者は列の相対幅のヒントを提供できますが、 利用者エージェントはこまの内容で一番幅の広い要素をレンダリングできる広さを確保するべきです。 著者の指定を上書きする時には、各列の相対幅が極端に変わることは避けるべきです。 [27] '''漸次表示''' [SRC[HTML 4 B.5.1.2]]。 表が大きな時やネットワーク接続が遅い時は、表を徐々に表示するのが利用者的にはよろしいです。 利用者エージェントは表のすべてのデータを受信する前に表示開始できるべきです。 著者は、漸次表示のためのヒントとして、列の数や表・各列の幅を指定できます。 [WEAK[(表の幅は既定値が [CODE(HTML)[100%]] で、列の幅の既定値は均分した値です。いずれも [CODE(HTMLe)[[[table]]]] 要素や [CODE(HTMLe)[[[col]]]] 要素の [CODE(HTMLa)[[[width]]]] 属性で上書きできます。)]] 列の数は、最初の行が到着するのを待てば良いと提案した人もいましたが、 最初の行の内容が多ければ時間がかかります。ですから、 漸次表示のためには著者が列数を明示する必要があります。 著者は漸次表示モードにするか、こま内容にあわせて幅を決定するモード (2パス自動幅決定モード) にするかも知らせる必要があります。 前者は [CODE(HTMLe)[col]] 要素や [CODE(HTMLe)[[[colgroup]]]] 要素で列数を明示します。 後者は1パス目で UA が列数を決定します。 [28] '''構造と表現''' [SRC[HTML 4 B.5.1.3]]。 [[Stricter]] 的にはこま内の文章の揃え位置やこま間の境界線はレンダリングの問題で、 構造の話ではありません。ですが、このような特徴は (ある応用から別の応用へと) 非常に可搬ですから、構造情報とまとめておくと便利です。 HTML 表模型はほとんどのレンダリング情報をスタイル・シートに任せていますが、 必ず使わないといけないわけではありません。 現在の [[DTP]] ソフトウェアは表のレンダリングを極めて多様に制御できますが、 HTML でそれをやると [[RTF]] や [[MIF]] のようにでかくなってしまうので非現実的です。 HTML はそうせずに、よく使われる線種から著者が選ぶ能力程度を提供しています。 それ以上の制御はスタイル・シートで行えます。 開発の過程で表罫パターン指定方法が色々検討されました。 辺の加減算ができるようにすると算法が比較的複雑になります。 [WEAK[(例えば、すべての表の要素に [CODE(HTMLa)[[[frame]]]] や [CODE(HTMLa)[[[rules]]]] を持たせると、あるこまのある辺の罫線の決定に24段階程度も必要になります。)]] それだけしても需要を完全に満たすことはできませんから、 単純で直感的でほとんどの目的に十分な程度に抑えてあります。 より複雑な方法を標準化する際には更に実験が必要です。 [29] '''行群・列群''' [SRC[HTML 4 B.5.1.4]]。 HTML では、 [[CALS]] 表模型に倣い、表の列を頭・体・足に分類できます。 こうすることでレンダリング情報の表現が簡単になりますし、 頁境界をまたぐ表で頭や足を反復させられますし、 体だけ scroll 可能にすることもできます。 [CODE(HTMLe)[[[tfoot]]]] は [CODE(HTMLe)[[[thead]]]] の前に置くので、 表全体を処理するのを待たずレンダリングできます。 [30] '''アクセス可能性''' [SRC[HTML 4 B.5.1.5]]。 HTML 表模型は、こまを名札付けできますから、 高品質な文章を生成できます。データベースや表計算との輸出入の自動化にも使えます。 [[#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 example)[
A test table with merged cells
Average Red
eyes
heightweight
Males1.90.00340%
Females1.70.00243%
]PRE] (HTML 4 仕様書より) レンダリング例: [PRE (example)[ [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] ]PRE] 他のレンダリング例: [16] [[行群]]や[[列群]]を使った複雑な表 [PRE(HTML example)[
CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
Code-Page
ID 		Name ACP OEMCP Windows
NT 3.1 		Windows
NT 3.51 		Windows
95
1200Unicode (BMP of ISO/IEC-10646)XX*
1250Windows 3.1 Eastern EuropeanXXXX
1251Windows 3.1 CyrillicXXXX
1252Windows 3.1 US (ANSI)XXXX
1253Windows 3.1 GreekXXXX
1254Windows 3.1 TurkishXXXX
1255HebrewXX
1256ArabicXX
1257BalticXX
1361Korean (Johab)X**X
437MS-DOS United StatesXXXX
708Arabic (ASMO 708)XX
709Arabic (ASMO 449+, BCON V4)XX
710Arabic (Transparent Arabic)XX
720Arabic (Transparent ASMO)XX
]PRE] (HTML 4 仕様書より) レンダリング例: [PRE(example)[ 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] 別のレンダリング例: [32] 簡単な比較表の例 [PRE(HTML example)[
CSS XSL
Can be used with HTML? yes no
Can be used with XML? yes yes
Transformation language? no yes
Syntax CSS XML
]PRE] 出典: [CITE[Web Style Sheets]] [[#comment]] ** メモ - [1] ''Tables in Netscape 1.1'' (HTML の標準化に関わっていない) 人々が見て, 学んだ、たぶん最初の table 要素の reference。 - [2] ''TABLE幅の計算方法'' 伝統的 [[HTML]] layout における [CODE(HTML)[TABLE]] 要素の幅の算出方法 (実装) について。 - [3] ''テーブルアート(HTMLタグ)のページ'' [CODE(HTML)[TABLE]] 要素群と非推奨属性群を使って''絵''を描いたもの。手書きでやったらしい。よくやるのぅ。 - [4] >>3 こういう系 (他にも■とかの文字と [[font]] 要素を使って絵を描くのを見たことがある。) って、[[不思議マーク付け]]を超えて、 [CODE(HTML)[image/x-html+sgml]] とか名乗ったら良いと思う(w - [5] >>3-4 いまや [[GIMP]] でも出来るらしい。 - [6] ''w3mの開発について'' : [[w3m]] が盛り上がったのは[[テーブル・レイアウト]]のせいであったという衝撃の事実(w。 w3m の表レンダリング算法の解説もあって参考になろう。 - [[HTML+]]: ''Tables'' - [[RFC 2070]] (HTML 2.[VAR[x]]) には表要素なし。 - ''Table'' : 表の実装は複雑なためか、怪しい不具合が一杯あったりします。その一部が紹介されています。 - HTML 3.0: ''Tables'' - 『The HTML3 Table Model』 W3C WD (1996/1/23) (内容は RFC 1942 draft)。 - ''diary07'' : [[w3m]] が table に対応。 - [11] >>3 ''【TABLE】テーブルアート 1【/TABLE】'' - [8] ''Table Sorting'' : [[DOM]]/[[JavaScript]] を使った表の [[sort]]。 - [9] 大昔、 [CODE(HTML)[TABLE]] 要素の出現してすぐの頃、 [CODE(HTML)[TABLE]] 未対応 [[UA]] では表系のタグがすべて無視されて、表の内容がつながって表示されてしまうという問題がありました。そのため、 [[tr]] 要素一つごとに [[br]] 要素を挿入するという[[裏技]]がありました。 - [10] >>9 [[section]] 要素的意味を持つ [[div]] 要素ごとに [[hr]] 要素を挿入するのも同じことだよなあ - [12] [[テーブル・レイアウト]]は[[不思議マーク付け]]の真髄にして完成形。そして最終形態。 [33] [CITE[強制ソート可能化串]] >コンピューター上に存在する全ての表はソート機能を持っているべきだ、というゆがんだ思想に基づいて作ってみたjavascriptプログラム。テーブルをDOMを使ってごりごり書き換えてソートできるようにするjavascriptで書かれたスクリプトが実行されるように書き換える串。 ([[名無しさん]]) [[#comment]] * メモ