大きいテーブルの中に小さい2個のテーブルを入れることで テーブルを横に並べることができます。通常テーブルを 横に並べようとすると自動改行され二つ目のテーブルは下の行にきて 縦方向に並んでしまいます。

大きいテーブルのcellspacingやcellpaddingの値を大きくすることにより両 テーブルの間隔を広げれます。
下のソースで赤文字になっている部分が大きいテーブルのソースです。 黒文字の部分が小さい方のテーブルのソースです。

【ブラウザ表示】

大きいテーブルの中に小さいテーブルが2個並んでいます。

次に大きい方のテーブルの外枠を border="0"にして消します。

<TABLE BORDER="0">
<TR>
<TD>
<table border="1">
<tr>
<td>テーブル1</td>
</tr>
</table>
</TD>
<TD>
<table border="1">
<tr>
<td>テーブル2</td>
</tr>
</table>
</TD>
</TR>
</TABLE>

上のソースではテーブルのソースが複雑に見えるので数学の要領でテーブル1のソースをA、 テーブル2のソースをBに置き換えてやると分かり易くなります。

<TABLE BORDER="0">
<TR>
<TD>
A
</TD>
<TD>
B
</TD>
</TR>
</TABLE>

このように置き換え作業をしてやるとテーブルを横に何個も並べる際に 本来複雑なソースが理解しやすくなります。

■テーブルを横に並べる（その2）

テーブルを並べるのを終えたい場合はalign属性を指定した テーブルタグの直後に
<br clear="all">を 記述します。

【ブラウザ表示】

Follow @hp_master_2003

■ その他の項目

HTMLタグ一覧のページに戻る