画面例１
aaaaa
| m1 | m2 | m3 |
| d11 | d12 | d13 |
| d21 | d22 | d23 |
|
|
左のような画面を作りました。
縦に並んでいる２つの表を横に並べて表示します。
コーディング
<html>
<body>
<center>aaaaa</center>
<br>
<center>
<table border>
<tr>
<th>m1
</th><th>m2
</th><th>m3
</th>
</tr>
<tr>
<td>d11
</td><td>d12
</td><td>d13
</td>
</tr>
<tr>
<td>d21
</td><td>d22
</td><td>d23
</td>
</tr>
</table>
<br>
<table border>
<tr>
<th>m4
</th><th>m5
</th><th>m6
</th>
</tr>
<tr>
<td>d14
</td><td>d25
</td><td>d36
</td>
</tr>
</table>
</center>
</body>
</html>
|
|
|
画面例２
aaaaa
| m1 | m2 | m3 |
| d11 | d12 | d13 |
| d21 | d22 | d23 |
|
|
|
|
表と表以外の組合せ（例えば表と画像、表と文字）でも使えます。
コーディング
<html>
<body>
<center>aaaaa</center>
<br>
<center>
<table border=0><tr><td ← C>
‥‥@
<table border>
<tr>
<th>m1
</th><th>m2
</th><th>m3
</th>
</tr>
<tr>
<td>d11
</td><td>d12
</td><td>d13
</td>
</tr>
<tr>
<td>d21
</td><td>d22
</td><td>d23
</td>
</tr>
</table>
<!-- <br> -->
← A
</td>
← B
<td valign="top">
← B
<table border>
<tr>
<th>m4
</th><th>m5
</th><th>m6
</th>
</tr>
<tr>
<td>d14
</td><td>d25
</td><td>d36
</td>
</tr>
</table>
</td></tr></table>
‥‥@'
</center>
</body>
</html>
|
|
|
説明
２つのＴＡＢＬＥを@〜@'のＴＡＢＬＥで囲みます。
元のＴＡＢＬＥの間の<br>を除き（A）、
</td>と<td valign="top">（B）を挿入します。
valign="top"は右側の表の上位置を左側の表に合わせるための記述です。
右側の表の方が高さが小さいとき、valign="top"を記述すると、表の上位置が揃います。
左側の表の方が高さが小さいときは、Cのtdにvalign="top"を記述して下さい。
|
