javascript でグリッド的なデータを動的に書き換える操作を実現する場合に候補として
- table で実現
- inline-block で実現
- float:left で実現
の3通りを考えてみた。セルの幅を固定する必要があるため、widthの効かないインライン要素は使えない。
tableはレイアウトが崩れにくくてよいのだが、検索エンジンにはあまり好かれないのと、IE では書き換えで問題が起こったり(tbodayがないと動かない by 「オレがルールだ!」:IE6でtable要素のappendChild、とか、trのinnerHTML書き換えるとレイアウト崩れるとか。→再現性微妙。微妙なところがまたイヤ)するので、とりあえず保留。
次に、inline-block だが、これはまず、Firefoxでは未実装と考えてよい。-moz-inline-boxで一応動作するが、text-alignが効かないなど、問題アリアリ(参考 Bug Report: display:-moz-inline-box + text-align = bug)。IEの場合は、hasLayout なるわけのわからないプロパティを認識してやれば、効くが解説読んでもよくわからない(参考 IE/Win: inline-block and hasLayout)
で、最後に float: left だが、ブロックの高さがずれるとレイアウトが崩れやすいので、その辺注意深く制御が必要だが、一番素直に言うことを聞いてくれる気がする。