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

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

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

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

No.1 ベストアンサー 回答者： fake-tang 回答日時： 2007/02/06 16:03

テーブルよりも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 回答日時： 2007/02/06 16:17

個別にテーブル化する。

幅の合っていないテーブルはテーブルではない

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