2つの表をL型に組み合わせる例です。

画面例1
aaaaa

m1 m2
d11 d12
d21 d22
bbbb
cccccc
m3 m4 m5
d130 d240 d350
左のような画面を作りました。
縦に並んでいる2つの表をL型に組み合わせてレイアウトを調整します。
コーディング
<html>
<body>
<center>aaaaa</center>
<br>
<center>
<table border>
<tr>
<th>m1 </th><th>m2 </th>
</tr>
<tr>
<td>d11 </td><td>d12 </td>
</tr>
<tr>
<td>d21 </td><td>d22 </td>
</tr>
</table>
bbbb<br>
cccccc<br>
<table border>
<tr>
<th>m3 </th><th>m4 </th><th>m5 </th>
</tr>
<tr>
<td>d130 </td><td>d240 </td><td>d350 </td>
</tr>
</table>
</center>
</body>
</html>
画面例2
aaaaa

m1 m2
d11 d12
d21 d22
bbbb
cccccc
m3 m4 m5
d130 d240 d350
下の表を上の表の真下に配置した例です。
コーディング
<html>
<body>
<center>aaaaa</center>
<br>
<center>
<table border=0 cellspacing=0 cellpadding=0> ‥‥@
<tr> ← A
<td> ← B
<table border>
<tr>
<th>m1 </th><th>m2 </th>
</tr>
<tr>
<td>d11 </td><td>d12 </td>
</tr>
<tr>
<td>d21 </td><td>d22 </td>
</tr>
</table>
</td> ← B'
<td valign="bottom"> ← C
bbbb<br>
cccccc<br>
</td> ← C'
</tr> ← A'
<tr> ← D
<td colspan=2> ← E
<table border>
<tr>
<th>m3 </th><th>m4 </th><th>m5 </th>
</tr>
<tr>
<td>d130 </td><td>d240 </td><td>d350 </td>
</tr>
</table>
</td> ← E'
</tr> ← D'
</table> ‥‥@'
</center>
</body>
</html>
説明
2つのTABLEと文字(bbbb,cccccc)を@〜@'のTABLEで囲みます。
上のTABLEと文字(bbbb,cccccc)をA〜A'のTRで囲みます。
上のTABLEをB〜B'のTDで囲みます。
文字(bbbb,cccccc)をC〜C'のTDで囲みます。
valign="bottom"C)を記述すると、文字(bbbb,cccccc)が下のTABLEのすぐ上に配置されます。
下のTABLEをD〜D'のTRとE〜E'のTDで囲みます。
colspan=2Eは下のTABLEのセルの幅を上のTABLEと文字(bbbb,cccccc)のセルに合わせるための記述です。

画面例3
aaaaa

m1 m2
d11 d12
d21 d22
bbbb
cccccc
m3 m4 m5
d130 d240 d350
下の表を上の表の右下に配置した例です。
コーディング
<html>
<body>
<center>aaaaa</center>
<br>
<center>
<table border=0 cellspacing=0 cellpadding=0> ‥‥@
<tr> ← A
<td valign="bottom"> ← B
<table border>
<tr>
<th>m1 </th><th>m2 </th>
</tr>
<tr>
<td>d11 </td><td>d12 </td>
</tr>
<tr>
<td>d21 </td><td>d22 </td>
</tr>
</table>
</td> ← B'
<td> ← C
bbbb<br>
cccccc<br>
<table border>
<tr>
<th>m3 </th><th>m4 </th><th>m5 </th>
</tr>
<tr>
<td>d130 </td><td>d240 </td><td>d350 </td>
</tr>
</table>
</td> ← C'
</tr> ← A'
</table> ‥‥@'
</center>
</body>
</html>
説明
2つのTABLEと文字(bbbb,cccccc)を@〜@'のTABLEとA〜A'のTRで囲みます。
上のTABLEをB〜B'のTDで囲みます。
valign="bottom"B)を記述すると、2つのTABLEの底面が同じ高さに配置されます。
文字(bbbb,cccccc)と下のTABLEをC〜C'のTDで囲みます。



〒745-0801 山口県周南市大字久米327-145
中川システム開発 ホームページ
Tel(0834)28-0205 Fax(0834)28-1272