テーブルレイアウト

テーブルレイアウト

[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 で、無理やり縦書きにするという裏技もありましたっけ。

影響

[27] table 要素以外の用途で使われることが極めて多かったため、 Webブラウザー側に整列などの利用者の便宜を図る機能を追加することが難しくなったという人もいます。

歴史

[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] ほとんどすべての場合において HTMLtable要素型を流用して行われる。 この手法は、1997年ごろに発見され、 有効な HTML のレイアウト手法として使用されてきた。 その使用法は研究が重ねられて複雑化し、 HTML のソースにおけるマークの占める割合は急激に増加した。 (その状況は 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/>テーブル・レイアウトを使っていたではないか、テーブル・レイアウトの何が悪い? と言う人がいます。 が、そのような指摘は色々な意味で間違っています。

[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 ( 版) <http://www.webdevout.net/tidings/2009/02/04/another-css-vs-tables-debate/>

[32] mozilla-central mozilla/accessible/src/html/nsHTMLTableAccessible.cpp ( 版) <http://mxr.mozilla.org/mozilla-central/source/accessible/src/html/nsHTMLTableAccessible.cpp#1029>

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

[33] IRC logs: freenode / #whatwg / 20110114 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20110114#l-319>

[34] Working Group Decision on ISSUE-130: table-layout ( (Sam Ruby 著, 版)) <http://lists.w3.org/Archives/Public/public-html/2011Mar/0245.html>

[35] IRC logs: freenode / #whatwg / 20110310 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20110310#l-992>

[36] IRC logs: freenode / #whatwg / 20110316 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20110316#l-742>

[37] Web Applications 1.0 r6006 10963 ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=6005&to=6006>

[38] Web Applications 1.0 r6008 7468 ( ( 版)) <http://html5.org/tools/web-apps-tracker?from=6007&to=6008>

[39] Techniques for WCAG 2.0 ( ( 版)) <http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/complete.html#F49>

[12] デザイナーズマンションestate ( 版) <http://www.msk-re.com/>

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

[41] 兵庫県の古民家 田舎暮し 明石屋不動産 ( ()) <http://www.akasiya2000.com/>

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

[43] RFC 7992 - HTML Format for RFCs () <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 要素が必須になってないのはこういう目的外利用を促進するためではないと思うんですがねぇ。。。