Table要素をレイアウト調整にしか使ってなかったエンプラエンジニアがW3CのTable仕様を読んでみた時の話
この記事は HTML5 Advent Calendar 2013 - Adventar の10日目の記事です。
Table要素をレイアウト調整の目的以外で使ったことがなかった自分だったのですが。
先日参加させてもらったHTML5マークアップカフェ(HTML5Expertの記事)でちゃんとTable要素の仕様を読んでみると、こいつが本当はすごいできる子だということに気が付かされたので、拙い英語力を使いW3Cの仕様書をがんばって翻訳しながら色々調べてみた。
そのテーブルがデータなのか？レイアウトなのか？
読み始めて、いきなりこれである。
Tables should not be used as layout aids.
テーブルをレイアウト目的で使うべきではありません。
去年まで<div>、<table>、<br>だけで作られた画面レイアウトを量産していた自分としては、この一文が本当に重くのしかかる・・・
続けて読んでみると、レイアウトか非レイアウトかを明示したい場合はこんな感じで属性をみて判断できるかもしれないよ～という表が
レイアウト目的 かもしれない Table要素の判断方法
- role="presentation"が指定されているとき
- border属性にゼロが設定されて、属性が非準拠になっているとき
- cellspacing属性にゼロが設定されて、属性が非準拠になっているとき
- cellpadding属性にゼロが設定されて、属性が非準拠になっているとき
レイアウト目的ではない かもしれない Table要素の判断方法
- captionが使われているとき
- theadが使われているとき
- thが使われているとき
- headersとscopeの組み合わせが使われているとき
- border属性 にゼロ以外が指定されたとき
- CSSを使い明示的に枠(borders)を可視化しているとき
上記はあくまで目安なんで間違ってる可能性があるよー、とも記載されているが、今後マークアップする上で、こういった事を心がけておくのは大事なんだろうなと思う。
いや、そもそも上で言ってるようにTable要素でレイアウトするなという話になるか・・・
borderの値の謎
そして読んでて一瞬だけ「？」となったborder属性の項
上のほうの説明に
The border attribute may be specified on a table element to explicitly indicate that the table element is not being used for layout purposes. If specified, the attribute's value must either be the empty string or the value "1".
border属性はTable要素に指定できます。 そのTable要素がレイアウト目的で使われているかどうかを明示することが可能です。属性の値は空文字 か "1"でなければいけません。
そして下に
he use of the border attribute with the non-conforming value 0 |Probably a layout table
( border属性にゼロが設定されて、属性が非準拠になっているとき | レイアウトを目的としたテーブルかもしれない )
The use of the border attribute with a value other than 0 | Probably a non-layout table
(borderの属性にゼロ以外の値を持つ | レイアウトを目的としてないテーブルかもしれない )
説明では 空白か"1"で、とあるのに、見分けるための指標ではゼロかゼロ以外かで書いてあるのでここで小一時間悩んでしまった・・・
空白も1も両方非レイアウト扱いになるんじゃなかろうかと迷ったのだが
- 推奨されるマークアップはborder要素を空白か"1"で。
- 一概に空白か"1"では（過去の資産もあり）判断できないので、border属性が非適合なのかどうかで見よう。
と言う事だろうか？
英語力が足りない自分の翻訳不足なのか、目安なので深く考えずにおくのが正解なのか・・・
w3c/web-platform-tests
ちょっとTable要素が理解できたので、Test the Web ForwardにTableのテストケースを何かしら投稿してみた。
コミットしてもらえるようなテストケースが良く判らないので tr要素のrowIndexのテストケースをコピーして、sectionRowIndexのテストケースを作る。
コピー元のテストケースでは何故かHTMLではなくJavaScriptで生成したタグ要素に対してのテストケースしか行われておらず不思議に思うも、 やらないよりはやった方がいいよね！と、HTMLタグの場合も含めたテストケースも追加して作ってみた。
で、動かしてみるとテストケースが真っ赤に・・・
どうやらjavascriptで生成したところは問題なく動作するようだがHTML要素の同じケースのテストで落ちまくってしまっている。
調べてみると、HTMLソースでは、こう書いた場合
<table> <tr> <th></tr> <td></td> </tr> <table>
ブラウザ開発ツールのElement (FireFoxだとインスペクタ)で見るとtbody要素が勝手に補完されている。
<table> <tbody> <tr> <th></tr> <td></td> </tr> </tbody> <table>
FireFoxもChoromeも同様の動作をするようで、どこかにそういった仕様があるのだろうか？（ちょっと見つけきれなかった）。
軽く読んで触っただけで、これだけ色々見つけることができたHTML5マークアップの世界、本当これからも色々試したり調べててみたいもの。
時間があれば、次は同じTable要素のScope属性を見てみたい。
明日はyoshiki katoさん！バトンよ続け！
