テーブル内の画像を横並べにしたい

質問

HTMLテーブルの学習中の初心者です、よろしくお願いいたします。

テーブル内に画像を配置すると縦並びになってしまいます。
これを横並びにしたいのですが、（添付画像参照ください）

同じテーブルの上段には既に列を分けてある1行目があります。
問題の2行目、列を分けてそれぞれのセルに画像を当て横幅を指定
という方法ですと上段の横幅に揃ってしまうのか、幅が大きく広がり過ぎてしまいうまくいきません。

テーブル以外にも方法はあるようなのですが
現在テーブルの学習をしているためテーブルでのやり方を調べています。

初心者ですので解りやすいもっともシンプルなやり方ございましたら
ぜひご指導お願いいたします。

回答No.2

syagain

A,Bの区切り位置と、C,Dの区切り位置を別々にしたい、ということでしょうか。ちょっと複雑になりますが、<col>で指定するといいと思います。
<col>タグ……列ごとの設定を一括で反映できます。

<table>
<col width=150></col>
<col width=50></col>
<col width=100></col>
<tr>
<td>A</td>
<td colspan="2">B</td>
</tr>
<tr>
　<td colspan="2">C</td>
<td>D</td>
</tr>
<tr>
<td colspan="3">E</td>
</tr>
</table>

【説明】
（１）colspanを以下のように、各行３つになるよう設定する。
[A_(1)][BB(2)]
[CC(2)][D_(1)]
[EEE______(3)]

（２）colで、各セル(col)の横幅を３つ分設定。
[A(150px)][B(50px)(100px)]
[C(150px)(50px)][D(100px)]
[E(150px)(50px)(100px)]

このように、三つの横幅をうまく調節することで、
句切れ目を変えることが出来ます。

お礼

なるほど～～
こんな方法もあるんですね～。
勉強になります。ありがとうございます。

回答No.1

bugtte

テーブルは行で横幅を変えるという事は出来ません。
ですのでこの場合はテーブルを入れ子するしか無いと思います。

<table>
<tr>
<td>A</td><td>B</td>
</tr>
<tr>
<td colspan="2">
<table><tr><td>C</td><td>D</td></tr></table>
</td>
<tr><td colspan="2">D</td></tr>
</table>

こんな感じでtdの中にもう一個テーブルを入れるんです。
早くcssレイアウトを使えるよう頑張ってくださいね。

お礼

できました！！！

結構長い間四苦八苦していたので、ほんとに助かりました（涙）
ありがとうございます。

早くCSS使えるようがんばります◎