[1]

テーブルレイアウトtable layoutは、単に特定の Webブラウザーでの見た目を整えることのみを目的として、 table 要素を乱用する HTML の記述技法です。

[26]

CSS が発達過程にあった90年代後半から00年代初頭に広く用いられていました。 table 要素の本来の用途から著しく逸脱していることや、 HTML文書のソースコードの可読性が極めて悪くメンテナンスが困難になることから、不適切な手法であると激しく非難されていました。にも関わらず、当時の他の手法では実現が困難な複雑なレイアウトを可能にするものでしたから、 CSS の普及が悲観されるほどまでに広まっていました。

Table Layout の主要な手法

[4] こまのまたぎ: colspan 属性や rowspan 属性を使うと、隣接するこま同士を結合できる。これらの属性は本来表の見出しこまで複数の行や列にまたがっている場合などのためのものだが、配置のための枠を自由に設定するために濫用されている。

[5] こまの大きさ: (未稿: width, height)

[3] 画像の分割: Table layout は特定の Web ブラウザでの見た目を重視して採られる手法であり、その文書は視覚的に優れていることが求められている。しかし、 Web ブラウザのレンダリング能力は限られているので、画像が使われる。画像は、本当の絵であることもあれば、文字列であることもあり、あるいはそれらの特定の配置 (位置関係) の実現のために使われることもある。

いずれにせよ、その画像は様々な作者 (編集者) の都合により、意味的な区切り (絵や文字の大きさなど) は無視してばらばらに分割した上で表のこまに分配する。そのうちのいくつかの画像片はリンクのアンカーとされることも少なくない。 (なお、画像写像が table layout と併用されることは稀である。)

[6] 空白取り: (未稿: spacer, spacer.gif)

[7] 入れ子の表: (未稿)

[19] table + br で、無理やり縦書きにするという裏技もありましたっけ。

歴史

[17] テーブル・レイアウトが始まったのは多分1996年後半だと思います。

この年の夏に WinIE3 が出て、まともに table をレンダリングするようになったので、表を堂々と使えるぞという方向に世間が動き出します。 Netscape も M$ も一生懸命独自拡張属性の実装に励んでいます。

そして、遅くても96年夏には、テーブル・レイアウトを自慢気に教える雑誌記事が出ています。

もっとも、この時点ではまだフレーム大流行真っ只中 (WinIE 3 がやっと対応してブームに火が点いたあたり —消え行く蝋燭の最後の勢い) でして、テーブル・レイアウトはまだ勢力としては弱い。 (ちなみに、トップ頁にはでっかな画像を一つどかんど真ん中に配置するスタイルが依然流行中。見出しを中央寄せにするとか、背景画像を使うのも超人気。)

[18] 1997年の初めくらいにはちょっとずつテーブル・レイアウトが「当然の知識」になりつつあったようです (でもまだ常識ではない)。もっとも、今のように頁全部をばりばりではなく、絵と文字の配置の調整が align とかでし切れないときに使ったみたいです。

[20] WinIE 3.0 や NN 3.0 の頃には表関連のおかしな不具合 (仕様?) があったのですよ。例: ブラウザーによって振る舞いの異なるタグ : 他にもありますか? http://tohoho.wakusei.ne.jp/lng/199801/98012000.htm

[21] >>20 その例から言えることは、その当時からテーブル・レイアウトに必死になってた (けどバグがあって困ってた) ってことですな。

[40] 00年代にテーブルレイアウトが好ましくないと声高に主張されるようになると、過剰に table 要素を忌避する人も現れました。そうした人達の一部は、 div 要素を過剰に用いる div厨と呼ばれました。中には、表を表すために div 要素を使う過激派までいました。

メモ

[2] ほとんどすべての場合において HTMLHypertext Markup Language の table 系要素型を流用して行われる。この手法は、1997年ごろに発見され、有効な HTMLHypertext Markup Language のレイアウト手法として使用されてきた。その使用法は研究が重ねられて複雑化し、 HTMLHypertext Markup Language のソースにおけるマークの占める割合は急激に増加した。 (その状況は tag soup (タグのごった煮) と皮肉られている。)

また、表を幾重にも入れ子にすることから、 WWW ブラウザのレンダリング性能はテーブル・レイアウトの過激化と共に上がっていった。 (初期の実装では table のこま内に入れることのできる要素の種類には様々な制限があったが、今日では実質的に存在しない。テーブル・レイアウトがなければ、今でもいくつかの制限が存続していたかもしれない。) テーブル・レイアウトによって記述の倍増したソースの転送の遅さや多重テーブルのレンダリングの遅さが、ネットワークや計算機の処理性能の向上に少なからず貢献しているという指摘もある。

[28] W3C Home Page Table-less Layout (2006-01-05 11:13:27 +09:00 版) http://www.w3.org/2002/11/homepage

[14] table レイアウト原理主義者(謎)の知ってる CSS レイアウトって、実は <DIV STYLE="POSITION:ABSOLUTE;TOP:45px;LEFT:56px"></DIV> とかのことなんじゃない?

[15] そう考えると、 CSS を使うと div が〜とか、新しいブラウザが出たら全部修正!とかの意味不明な主張も納得できるというか。

[16] 掟破り:赤7「テーブル使い来襲」 http://www2.plala.or.jp/Cool/okite/red07.html

[22] >>21 今は表の実装は安定したけど、 CSS の実装で同じようなことになってるんですな。まさに歴史は繰り返す。

[23] >>20-22 当時は今の DOM 的処理モデルが確立してなくて、昔ながらの読みながら上から順次処理をまだしていただろうから、複雑な表になったりすると、フラグが一杯立ったりして訳のわからない状態になって、バグ多発してたんだろうな。

[24] バグといえば、 NC4 が、 </table> がないと即死するバグ。そんな HTML を書く奴が悪いといえばそれまでだけど、それだけで死んでしまう NC もかなり悪い。知らないタグやおかしなタグは適当にエラー処理という当時も続いていた HTML 処理の伝統にも反する。

[25] W3C のホーム頁もテーブル・レイアウトしていた?: たまに、ちょっと前まで W3C のホーム頁 http://www.w3.org/ もテーブル・レイアウトを使っていたではないか、テーブル・レイアウトの何が悪い? と言う人がいます。が、そのような指摘は色々な意味で間違っています。

国会議員や裁判官が違法行為をしていたとしても、同じことをしてもいい理由にはなりません。
ちょっと前といいますが、もう3年以上経っています。進歩の早いこの世界でそんな昔の話を持ち出して現在を語っても意味がありません。
W3C のホーム頁で使われていたのは単純な横3分割だけの table です。世間一般でテーブル・レイアウトというと連想されるような、頁の内容を文字通り縦横無尽に切り裂いたり spacer.gif のような意味の分からない画像を散りばめたりしたような小汚いレイアウト手法とは雲泥の差があります。

[8] 東京webデザイナー日記: 日経平均銘柄225社サイトの脱テーブル率調査 http://tokyo.fun.cx/web/2006/05/post_18.html (名無しさん 2006-05-26 11:55:52 +00:00)

[9] Web::Blogoscope: 中央省庁の脱テーブル状況 http://www.cybergarden.net/blog/2005/08/post_97.html (名無しさん)

[10] 覚え書き@kazuhi.to: テーブルレイアウトの自動判別 http://kidachi.kazuhi.to/blog/archives/001704.html (名無しさん 2006-07-04 11:51:29 +00:00)

[11] >>10 に脊髄反射で変なコメントを書いてる人にヒント: テーブルレイアウトかどうか自動判別できれば、テーブルレイアウトはアクセシビリティが低いの類の主張の根拠の一つを崩す突破口になるかもよwwwww (名無しさん 2006-07-04 11:53:48 +00:00)

[29] 音声ブラウザと相性の良いHTMLを作る(2)。 (Junnama Online (Mirror)) (2007-06-09 18:01:40 +09:00 版) http://junnama.alfasado.net/online/2007/05/css_1.html (名無しさん 2007-06-09 14:35:33 +00:00)

[30] W3C HTML Mail Workshop - List of Papers (2007-06-08 10:05:55 +09:00 版) http://www.w3.org/2007/05/html-mail/minutes

Jim: The new designer coming out from schools do all in CSS. ... but we have to educate them (!) to use table layout for emails.

なんとも皮肉な現実ですわな。

[31] Web Devout tidings » Blog Archive » Another CSS vs. tables debate (2009-02-11 18:48:36 +09:00 版) http://www.webdevout.net/tidings/2009/02/04/another-css-vs-tables-debate/

[32] mozilla-central mozilla/accessible/src/html/nsHTMLTableAccessible.cpp (2009-02-19 21:59:12 +09:00 版) http://mxr.mozilla.org/mozilla-central/source/accessible/src/html/nsHTMLTableAccessible.cpp#1029

Gecko のレイアウト表とデータ表の判定コード。

[33] IRC logs: freenode / #whatwg / 20110114 ( (2011-02-06 10:50:03 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110114#l-319

[34] Working Group Decision on ISSUE-130: table-layout ( (Sam Ruby 著, 2011-03-11 02:36:08 +09:00 版)) http://lists.w3.org/Archives/Public/public-html/2011Mar/0245.html

[35] IRC logs: freenode / #whatwg / 20110310 ( (2011-04-02 03:23:11 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110310#l-992

[36] IRC logs: freenode / #whatwg / 20110316 ( (2011-04-09 12:13:11 +09:00 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20110316#l-742

[37] Web Applications 1.0 r6006 10963 ( (2011-04-14 09:58:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=6005&to=6006

[38] Web Applications 1.0 r6008 7468 ( (2011-04-15 08:46:00 +09:00 版)) http://html5.org/tools/web-apps-tracker?from=6007&to=6008

[39] Techniques for WCAG 2.0 ( (2014-03-11 23:08:17 +09:00 版)) http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/complete.html#F49

[12] デザイナーズマンションestate (2016-05-30 10:36:00 +09:00 版) http://www.msk-re.com/

[13] >>12 2016年とは思えない、四重に入れ子になった table、溢れる font と spacer.gif が味わい深いwww

[41] 兵庫県の古民家田舎暮し明石屋不動産 ( (2016-10-04 11:30:46 +09:00)) http://www.akasiya2000.com/

[42] >>41 最近も更新されているサイト。なんと table が8重の入れ子!

[43]

RFC 7992 - HTML Format for RFCs (2016-12-17 02:51:45 +09:00) https://tools.ietf.org/html/rfc7992#section-6.4

In order to simplify printing by HTML renderers that implement
[W3C.WD-css3-page-20130314], a hidden HTML <table> tag of class
"ears" is added at the beginning of the HTML <body> tag, containing
HTML <thead> and <tfoot> tags, each of which contains an HTML <tr>
tag, which contains three HTML <td> tags with class "left", "center",
and "right", respectively.
The <thead> corresponds to the top of the page, the <tfoot> to the
bottom. The string "[Page]" can be used as a placeholder for the
page number. In practice, this must always be in the <tfoot>'s right
<td>, and no control of the formatting of the page number is implied.
   <table class="ears">
     <thead>
       <tr>
         <td class="left">Internet-Draft</td>
         <td class="center">HTML RFC</td>
         <td class="right">March 2016</td>
       </tr>
     </thead>
     <tfoot>
       <tr>
         <td class="left">Hildebrand</td>
         <td class="center">Expires September 2, 2016</td>
         <td class="right">[Page]</td>
       </tr>
     </tfoot>
   </table>

[44] これはどうみても table の濫用ですねぇ。。。流石は2016年になってようやくプレインテキストから脱却しようとしている IETF、テーブルレイアウトにも20年遅れで参入ですか。。。

[45] tbody 要素が必須になってないのはこういう目的外利用を促進するためではないと思うんですがねぇ。。。

Table Layout の主要な手法

影響

歴史

メモ