|
| "かきくけこ"
]PRE]
と解釈されます。
** レンダリング
[15]
[[.//レンダリング]]を参照してください。
** 歴史
[21] [[HTML表モデル]]を参照して下さい。
** 実装
[36] '''リスト項目に画像を使うための配置表''':
[[FrontPage]] の 97 だったか 98 だったか忘れましたが、
[[リスト]]の項目の印として [CODE(HTMLe)[[[ul]]]] の記号や
[CODE(HTMLe)[[[ol]]]] の数字の他に、任意の[[画像]]を指定できました。
当時はまだ [[CSS]] の [CODE(CSS)[[[list-type-style]]]]
が使われていなかったので、 [[HTML]] としては [CODE(HTMLe)[[[table]]]]
が使われていました。 ([[FrontPage]] の他の特徴的な機能と同じように)
[[注釈宣言]]に適当に情報を詰め込んで、 [[WYSIWYG]]
な編集モードでは [CODE(HTMLe)[[[ul]]]] も画像を使ったリストを表す
[CODE(HTMLe)[[[table]]]] も区別なく扱えるようになっていました。
[38] '''整列や列の入れ替え'''
@@ 書きかけ:
表の整列は有用と考えられるが、主要な利用者エージェントには実装されていない。
テーブル・レイアウトに濫用されてきたことの他に、
連結されている時にどう扱うかが大きな課題として存在する。
[[GUI]] の [[ListView]] 制御子は列の入れ替えを実装していることが多いが、
HTML の表ではこれもあまり実装されていない。
やはり連結されている時の扱いが問題になる。
[[DOM]] 上の扱いはどうなるのか (実際に節点の文書順を入れ替えてしまうのか、
レンダリング上でのみ入れ替えるのか —
その場合選択範囲など様々な問題が派生)
[[#comment]]
** 設計
[25] [[HTML表モデル]]を参照して下さい。
** 不思議解釈
[17] [CODE(HTMLe)[table]] は本来の表としてではなく、
頁の構成要素の[[配置]]のためだけに悪用されてきました。
しかし、そのような用途に使うと非図形的媒体での閲覧者にとっては意味のわからない情報になってしまいますし、
図形的媒体でも利用者が大きな画面での利用を強要されることになりかねませんから、
表を配置目的に使用するべきではありません。代わりに[[スタイル・シート]]が利用できます
[HTML 4]。
詳しくは[[テーブル・レイアウト]]を参照してください。
[19] 典型的レンダリングにおける [CODE(HTMLe)[[[form]]]] の余白を消すために
[CODE(HTMLe)[[[table]]]] 直下や [CODE(HTMLe)[[[tr]]]]
直下に [CODE(HTMLe)[form]] のタグを入れるという[Q[裏技]]
が不思議界では比較的良く知られていて、
信じられないことに世紀が変わった今でも愛用している人がいます。
[44]
[CITE[404 Blog Not Found:CSS - スクロール可能なテーブル w/o JavaScript]] ([CODE[2007-03-17 01:19:16 +09:00]] 版)
([[名無しさん]] [WEAK[2007-03-16 23:40:44 +00:00]])
[[#comment]]
** 例
[18] 比較的単純な表
[PRE(HTML example)[
A test table with merged cells
| Average
| Red
eyes
|
|---|
| height | weight
|
|---|
| Males | 1.9 | 0.003 | 40%
|
|---|
| Females | 1.7 | 0.002 | 43%
|
|---|
]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
|
| 1200 | Unicode (BMP of ISO/IEC-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]
(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]]
[34] [[リスト]]の項目を表す記号や数字の位置合わせのためと思われる
[[table layout]] の例
>
[PRE(HTML illegal example code)[
]PRE]
出典: [CITE[Yahoo! ヘルプ - ジオシティーズ]]
(2005年4月現在)
常識的な人なら [CODE(HTMLe)[[[ul]]]] や [CODE(HTMLe)[[[ol]]]] や
[CODE(HTMLe)[[[h[VAR[n]]]]]] を使うところですが、
常識が通用しないからこその[[不思議マーク付け]]。
どうしてわざわざ簡単にできることを難しくするのでしょうかね?
[WEAK[(その方が制作費を高く請求できるのでしょうか。)]]
なんだか目的が良く分からない[[数値文字参照]]も使っていますし。
実は引用部は更に別の [CODE(HTMLe)[[[table]]]]
の中の一部分だったりします。
どうやら制作者自身も文書の構造をつかめていないらしく、
後半のリスト (のようなもの) の中で後から追加したらしき部分の
[CODE(HTMLe)[[[tr]]]] が別の [CODE(HTMLe)[[[td]]]]
の中に入っているという失態をやらかしています。
[35] 背景色のために [CODE(HTMLe)[[[table]]]] を使う例
>
[PRE(HTML deprecated example code)[
[CODE(comment)[]]
[CODE(comment)[]]
]PRE]
出典: [CITE[リンク、検索機能を追加]]
(2004年10月付け)
これは、 [[Google]] の検索用の[[フォーム]]に
[[Web頁]]に埋め込む例として挙げられているものです。
10年も前から[[非推奨]]であり使うべきではないと言われている
[CODE(HTMLe)[[[center]]]] を使っているのは''恥ずべきこと''ですが、
1[[こま]]だけの謎の [CODE(HTMLe)[[[table]]]]
も目に付きます。ああ、[[背景色]]を[[白]]にするために使っているのですね。
[[CSS]] が使われる前には [CODE(HTMLe)[[[table]]]]
を使って文書内の背景色を部分的に変更する[Q[[[裏技]]]]がありましたっけ。
[42]
[PRE(HTML invalid example code)[
]PRE]
;;
[CITE@en-us[About Conditional Comments]] ([CODE[2007-01-08 14:42:10 +09:00]] 版)
[43]
[PRE(HTML invalid example code)[
[VAR[...]]
[VAR[...]]
|
[VAR[...]]
|
]PRE]
[70]
2つの[[行]]にあたるものが1[[行]]にまとまっている例:
[PRE(HTML example code)[
| Element |
Frequency |
Element |
Frequency |
TFOOT |
3,947 |
INS |
1,344 |
DFN |
3,584 |
KBD |
1,313 |
]PRE]
;; [CITE@en[MAMA: Key findings - Opera Developer Community]] ([TIME[2008-10-18 11:58:12 +09:00]] 版)
([[名無しさん]])
[[#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で書かれたスクリプトが実行されるように書き換える串。
[37]
[CODE(HTMLe)@en[[[table]]]] [[要素型]]に丁度対応する[Q[[[表]]]]という[[日本語]]の[[単語]]があるにも関わらず、
なぜか、よく[Q@en[[[テーブル]]]]と[[片仮名]]で呼ばれます。
中には、[Q[[[表]]]]と[Q@en[[[テーブル]]]] ([CODE(HTMLe)@en[[[table]]]])
を区別している人もいるようですが、
そうすることに何か利点はあるのでしょうかね?
そういうことをしている人は、分かってやっているのなら良いのですが、
どうも[[表]]とは何か分かっていないきらいがありまして。
[39]
[CITE[05/10/2003勉強会の記録]]
([[名無しさん]])
[40]
[CITE[Mingyi's FireFox Extension for sorting HTML tables - TableSort]]
([[名無しさん]] [WEAK[2006-05-27 01:19:10 +00:00]])
[41]
[CITE[A brief history of HTML tables]]
([[名無しさん]])
[45]
[CITE@en[Web Usability - Accessible Data Tables]] ([CODE[2007-04-17 20:23:46 +09:00]] 版)
([[名無しさん]])
[46]
[CITE@en[Web Usability - Accessible Data Tables]] ([CODE[2007-04-17 20:23:46 +09:00]] 版)
([[名無しさん]])
[47]
[CITE@en[Web Usability - Accessible Data Tables]] ([CODE[2007-04-17 20:23:46 +09:00]] 版)
([[名無しさん]])
[48]
[CITE@en-gb[Juicy Studio: Table Inspector - Mozilla/Firefox Extension]] ([CODE[2007-05-26 17:24:04 +09:00]] 版)
([[名無しさん]])
[49]
[CITE@en-gb[Juicy Studio: Complex Table Inspector]] ([CODE[2007-05-26 17:24:04 +09:00]] 版)
([[名無しさん]])
[50]
[CITE@ja[国語辞典 英和辞典 和英辞典 - goo 辞書]] ([CODE[2007-05-27 22:47:58 +09:00]] 版)
[[HTML 5]] として[[構文解析]]したところ、
[CODE(HTMLe)@en[[[table]]]] が54個含まれていました。
横線1本のためにもわざわざ [CODE(HTMLe)@en[[[table]]]]
(と [CODE(CSS)@en[[[border]]]]) を使っています。
([[名無しさん]] [WEAK[2007-05-27 13:55:31 +00:00]])
[51]
[CITE@ja[Yahoo!辞書 - Yahoo! JAPANの辞書サービス]] ([[Yahoo! JAPAN]] 著, [CODE[2007-05-27 22:55:14 +09:00]] 版)
これは33個。
([[名無しさん]] [WEAK[2007-05-27 13:56:55 +00:00]])
[52]
[CITE[エキサイト 辞書 : 英和辞書 和英辞書 国語辞典 中日辞書 日中辞書]] ([CODE[2007-05-27 22:56:39 +09:00]] 版)
26個。 >>50-51 と違って [CODE(HTMLe)@en[[[th]]]] を使っているのが真新しいwwwwwwwwwww
([[名無しさん]] [WEAK[2007-05-27 13:57:49 +00:00]])
[53]
[CITE@ja[Excite エキサイト]] ([CODE[2007-05-27 23:00:10 +09:00]] 版)
>>52 よりよほど複雑に見えるが [CODE(HTMLe)@ne[[[table]]]]
は7個しかないぞ・・・
([[名無しさん]] [WEAK[2007-05-27 14:02:40 +00:00]])
[54]
[CITE@ja[国語 英和 和英 カタカナ 漢字 - Infoseek マルチ辞書]] ([CODE[2007-05-27 23:02:37 +09:00]] 版)
13個。
([[名無しさん]] [WEAK[2007-05-27 14:03:31 +00:00]])
[55]
[CITE@ja[国語辞書 英和辞書 和英辞書 - livedoor 辞書]] ([CODE[2007-05-27 23:03:23 +09:00]] 版)
9個。
([[名無しさん]] [WEAK[2007-05-27 14:04:16 +00:00]])
[56]
>>50-55 [[Google]] の順位が下がるほど数が減ってるwwwwwwwwwww
([[名無しさん]] [WEAK[2007-05-27 14:05:57 +00:00]])
[57]
[CITE[Yahoo! JAPAN]] ([CODE[2007-05-28 00:32:47 +09:00]] 版)
103個wwwwwwwwww
([[名無しさん]] [WEAK[2007-05-27 15:33:36 +00:00]])
[58]
[CITE[雅虎首页]] ([CODE[2007-05-28 00:33:00 +09:00]] 版)
1個、本当の表だけ。
([[名無しさん]] [WEAK[2007-05-27 15:34:01 +00:00]])
[59]
yahoo.com 系は全然 [CODE(HTMLe)@en[[[table]]]] を使ってない。[[禿]]糞すwwwwwwwwww
([[名無しさん]] [WEAK[2007-05-27 15:36:21 +00:00]])
[60]
[CITE@en[archives related to accessible TABLE design in HTML4]] ([[Al Gilman]] 著, [CODE[2007-05-29 02:20:23 +09:00]] 版)
([[名無しさん]] [WEAK[2007-06-04 13:18:29 +00:00]])
[61]
[CITE[Bug 12740 - www.bmw.com page doesn't work]] ([CODE[2007-06-20 10:43:03 +09:00]] 版)
([[名無しさん]] [WEAK[2007-06-20 01:54:15 +00:00]])
[62]
[CITE[HTML5 IRC logs: freenode / #whatwg / 20070620]] ([CODE[2007-06-20 10:53:07 +09:00]] 版)
([[名無しさん]] [WEAK[2007-06-20 01:55:39 +00:00]])
[63]
[CITE@en[HTML tables - trying to reach consensus]]
([Q@en[Bert Bos]] 著、[CODE@en[Wed, 3 May 95 08:52:34 EDT][1995-05-03]])
([[名無しさん]])
[64]
[CITE[html-wg-95q2: Yet another table proposal for HTML 2.1]] ([CODE[2007-07-01 19:46:05 +09:00]] 版)
([[名無しさん]])
[65]
[CITE@en-us[HTML5 Tables]] ([CODE[2007-08-01 21:31:50 +09:00]] 版)
([[名無しさん]] [WEAK[2007-08-01 12:34:43 +00:00]])
[66]
[CITE[Table Inspector]] ([CODE[2007-08-22 08:03:53 +09:00]] 版)
([[名無しさん]] [WEAK[2007-08-22 01:46:22 +00:00]])
[67]
[CITE[Tables in HTML - Anne’s Weblog]] ([CODE[2007-09-07 06:15:43 +09:00]] 版)
([[名無しさん]])
[68]
[CITE[JavaScript - tableのオートフィルタ]] ([CODE[2007-03-18 00:00:00 +09:00]] 版)
([[名無しさん]])
[69]
[CITE@en-GB[Collections of Interesting Data Tables]] ([CODE[2008-04-07 17:14:18 +09:00]] 版)
[71] [CITE[Table Sorting]] ([TIME[2002-03-02 19:14:02 +09:00]] 版)
[72] [CITE@en[Table feedback]] ([[Ian Hickson]] 著, [TIME[2008-12-20 18:21:53 +09:00]] 版)
[73] [CITE@en-US[Tableのデザインまとめ | DesignWalker]] ([TIME[2009-02-08 17:51:33 +09:00]] 版)
[74] [CITE[MOONGIFT: » もうこれで十分。HTML上でテーブルを表示するなら「Sigma Grid」:オープンソースを毎日紹介]] ([[MOONGIFT]] 著, [TIME[2009-02-08 19:19:22 +09:00]] 版)
[85] [CITE@en[The Last of the Parsing Quirks]]
([[Henri Sivonen]] 著, [TIME[2009-06-05 20:09:06 +09:00]] 版)
[86] [CITE@en[Web Applications 1.0 r5755 Nulls in shouldn't cause white space to move before the table.]]
( ([TIME[2011-01-11 07:08:00 +09:00]] 版))
| | |