- ベストアンサー
幅の違うテーブルを作りたい
異なる幅の組み合わさったテーブルを作りたいと思っています。 <例>こんな感じ(イメージできますか?) --------------- | | | ------------------------ | | | ------------------------ | | | ------------------- 試行錯誤で作ってますが、できません。。。 どなたかよろしければ どのように作ればいいのか教えてください。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
テーブルよりもDIVのほうが楽そうですが、 <table cellspacing="0"> <tr><td style="border:1px solid #cccccc">1</td><td colspan="2" style="border:1px solid #cccccc">1-2</td><td></td></tr> <tr><td style="border:1px solid #cccccc">2</td><td colspan="3" style="border:1px solid #cccccc">2-2</td></tr> <tr><td style="border:1px solid #cccccc">3</td><td colspan="4" style="border:1px solid #cccccc">3-2</td><td></td><td></td></tr> </table> 単純に、右側のセルに colspan を指定し、余分な TD を整理しただけですが。 ※ その際、テーブル全体の罫線を非表示にして文字の入っているところに のみ border 指定し、罫線を表示させています。 これならDIVのほうがスマートにできるんじゃないかなーとは思いましたし、 本当ならcssでまとめたほうがわかりやすくてきれいなんですが、とりあえず テーブルで。 テーブルレイアウトなら、ビルダー買ったほうが楽ですよ。
その他の回答 (1)
個別にテーブル化する。 幅の合っていないテーブルはテーブルではない 或いはテーブルちっくに並べただけでboxの境界線を表示して似たような形に仕上げる <table border><tr><td>1</td><td>2</td></tr></table> <table border><tr><td>A</td><td>B</td><td>C</td></tr></table> <table border><tr><td>あ</td><td>い</td></tr></table> ↓ <style><!-- div.BX span{border:solid 1px} --></style> <div class="BX"> <span>1</span><span>2</span><br> <span>A</span><span>B</span><span>C</span><br> <span>あ</span><span>い</span><br> </div>