幅の違うテーブルを作りたい

質問

異なる幅の組み合わさったテーブルを作りたいと思っています。

<例>こんな感じ（イメージできますか？）
---------------
|　　　　|　　|
------------------------
|　　　　|　　　　　　　|
------------------------
|　　　　|　　　　|
-------------------

試行錯誤で作ってますが、できません。。。
どなたかよろしければ
どのように作ればいいのか教えてください。

回答No.1

fake-tang · ベストアンサー

テーブルよりも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でまとめたほうがわかりやすくてきれいなんですが、とりあえず
テーブルで。
テーブルレイアウトなら、ビルダー買ったほうが楽ですよ。

回答No.2

noname#39970

個別にテーブル化する。
幅の合っていないテーブルはテーブルではない

或いはテーブルちっくに並べただけで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>