Edit

Page

Page title:

Page body:

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

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

* Table Layout の主要な手法

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

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

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

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

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

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

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

* 影響

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

* 歴史

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

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

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

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

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

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

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

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

* メモ

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

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

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

[14] [[table]] レイアウト原理主義者(謎)の知ってる [[CSS]] レイアウトって、実は [SAMP(HTML)[<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] バグといえば、 [[NC]]4 が、 [CODE(HTML)[</[[table]]>]] がないと即死するバグ。そんな HTML を書く奴が悪いといえばそれまでだけど、それだけで死んでしまう NC もかなり悪い。知らない[[タグ]]やおかしな[[タグ]]は適当にエラー処理という当時も続いていた HTML 処理の伝統にも反する。

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

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

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

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

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

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

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

[30]
[CITE@en[W3C HTML Mail Workshop - List of Papers]] ([CODE[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] [CITE@en[Web Devout tidings » Blog Archive » Another CSS vs. tables debate]] ([TIME[2009-02-11 18:48:36 +09:00]] 版) <http://www.webdevout.net/tidings/2009/02/04/another-css-vs-tables-debate/>

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

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

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

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

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

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

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

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

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

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

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

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

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

[FIG(quote)[
[FIGCAPTION[
[43] [CITE@en[RFC 7992 - HTML Format for RFCs]]
([TIME[2016-12-17 02:51:45 +09:00]])
<https://tools.ietf.org/html/rfc7992#section-6.4>
]FIGCAPTION]

>    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.
>
[PRE(HTML code)[
   <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>
]PRE]
]FIG]

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

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

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)