floatで作る表もどきの話。近所で論争が起きていて、思い出したことがあったので書いてみた。論争については、そのテーブル、本当に必要?（徒委記）でまとめられている。論争の内容そのものには直接言及はしないけれど、関係はあるかも。いや、ないかも。
かなり昔、floatで表もどきを作ったことがあった。
table要素を解釈する携帯電話でも見られるように、というのが目的だった。そのときは、1行目のtheadにあたるものがなくても「にんげんさま」は理解できるもの（たとえば、1つの行が「2時間目 体育 校庭 田中」みたいなの）だったので、表もどきを壊して縦に並べても意味が通ると思って実行に移した。その表もどきは、内容を書き換えながら現在でも稼動している。
そのときは、表もどきにしようと思ったのに各ブラウザ（IE/Mozilla/Opera）できっちり同じ見た目にできなくて悔しかった、というのを思い出した。ので、今日、新しく作ってみたのだが、作ってみたら、昔書いたのとほとんど同じCSSになってしまった。あらあら。
昔のは、同じ見た目にならない、じゃあここを変えて確認、今度はここがうまくいかないからここを変えて確認、と、さんざん試行錯誤したあげく、なんとなくIE/Mozilla/Operaで似たような見た目になったのでよかったことにしたのだ。今回は、floatはどこが地雷かがわかっているので、それを避けて書いた。制作時間はおかげではるかに短くなったが、どちらも、同じ見た目にするという目的でやったので、できあがったCSSが同じになってしまうのも仕方なかったのかもしれない。
きっちり同じ見た目にできなかった件は、同じ見た目にできない理由がちゃんと説明できました、というだけで、けっきょく同じ見た目にはできなかった。苦笑。
自分が忘れないためにも、簡単に説明を書いておく。
table要素でやるときは
<tr>
<th>2時間目</th>
<td>体育</td>
<td>校庭</td>
<td>田中</td>
</tr>みたいに書くところを
<dt>2時間目</dt>
<dd class="subject">体育</dd>
<dd class="place">校庭</dd>
<dd class="teacher">田中</dd>に直し、これを横に並べることを考える。いつものように、IE6は後方互換モード、その他は標準準拠で解釈させる。
これぐらいの長さならば、table要素にしても携帯電話でも見られるけれど、もっと横に長くなってしまう場合は携帯電話でみるとはまることがあるので、dl要素でやる意味も出てくる。
ちなみに
<dt>東京</dt>
<dd>18℃</dd>
<dd>14℃</dd>
<dd>14℃</dd>
<dd>15℃</dd>
<dd>10℃</dd>
<dd>13℃</dd>のような場合は、「にんげんさま」でもいまいち理解できないので、ほかの方法を考える必要がある。
横に並べる場合、ADP: floatレイアウトでつまづかないためのTipsに従って、float: leftをしながら書けばできる。が、「先にfloat: leftをしたボックスにmargin-leftは指定してはいけない」に簡単に引っかかる。dtの左側の余白を指定できないのだ。widthは必ず必要だし、widthとpaddingを同時指定してしまうとIE6後方互換モードとその他で見た目が変わってしまうし、text-indentで余白をあけると、折り返されたときに余白がなくなってしまうし、で八方ふさがりなのだ。
各行ごとにborderをひかないならば、あらかじめ上の要素で余白を作っておくことも可能だが、そのようにデザイン側で譲歩しないかぎり、同じにすることはできない。ほかのhackを使うとか、左側の余白なんて、どうせ4ピクセルとかそれぐらいなので、あらかじめ4ピクセルあってもなくても大丈夫なようにするとかしておけばいいわけだが、やや悲しい。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/537