画面例１
|
左のような画面を作りました。
縦に並んでいる２つの表をＬ型に組み合わせてレイアウトを調整します。
コーディング
<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>
|
|
|
画面例２
|
下の表を上の表の真下に配置した例です。
コーディング
<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>
|
|
|
説明
２つのＴＡＢＬＥと文字（bbbb,cccccc）を@〜@'のＴＡＢＬＥで囲みます。
上のＴＡＢＬＥと文字（bbbb,cccccc）をA〜A'のＴＲで囲みます。
上のＴＡＢＬＥをB〜B'のＴＤで囲みます。
文字（bbbb,cccccc）をC〜C'のＴＤで囲みます。
valign="bottom"（C）を記述すると、文字（bbbb,cccccc）が下のＴＡＢＬＥのすぐ上に配置されます。
下のＴＡＢＬＥをD〜D'のＴＲとE〜E'のＴＤで囲みます。
colspan=2（Eは下のＴＡＢＬＥのセルの幅を上のＴＡＢＬＥと文字（bbbb,cccccc）のセルに合わせるための記述です。
|
画面例３
|
下の表を上の表の右下に配置した例です。
コーディング
<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>
|
|
|
説明
２つのＴＡＢＬＥと文字（bbbb,cccccc）を@〜@'のＴＡＢＬＥとA〜A'のＴＲで囲みます。
上のＴＡＢＬＥをB〜B'のＴＤで囲みます。
valign="bottom"（B）を記述すると、２つのＴＡＢＬＥの底面が同じ高さに配置されます。
文字（bbbb,cccccc）と下のＴＡＢＬＥをC〜C'のＴＤで囲みます。
|
