レイアウト(段組)
tableを駆使して段組をしてみよう。
tableタグとは、通常は以下のような表を作るものである。
-
- -

上記の表のソース↓
<table border="1">
<tr>
<td colspan="2" width="300">-</td>
</tr>
<tr>
<td width="150">-</td>
<td width="150">-</td>
</tr>
</table>


まず、次のような段組を作りたいとすると
1-1.gif

これは、縦3段、に分けて2段目を3つに分ければよいので、以下のソースで出来ると考えることが出来る。
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
しかし、これでは、実際には、次のようになってしまう。
　
　 　 　
　


これでは意図している結果が得られないので、
第1段目と第2段目の横をcolspanを使用して結合すればよい。

これを実際にHP作成に使えるようにソースの例を書いてみる。
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3" width="900" height="50"></td>
</tr>
<tr>
<td width="200" height="400"></td>
<td width="500"></td>
<td width="200"></td>
</tr>
<tr>
<td colspan="3" height="50"></td>
</tr>
</table>


このソースで実際にtableを作ってみると(width,height,borderの値は変えてある)
　
　 　 　
　

後は、それぞれの要素のとなるものを<td></td>間に書いてあげれば完成です。

さらにその中の一部を段組をしたい場合。
例えば、真ん中の左だけ段組をしたい場合は、tableの中でtableを使用すればよい。
要するに、ソースは次のようになる↓
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="3" width="900" height="50"></td>
</tr>
<tr>
<td width="200" height="400">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="200" height="100"></td>
<td width="200" height="200"></td>
<td width="200" height="200"></td>
</tr>
</table>
</td>
<td width="500"></td>
<td width="200"></td>
</tr>
<tr>
<td colspan="3" height="50"></td>
</tr>
</table>
このソースで実際にtableを作ってみると(width,height,borderの値は変えてある)
　
　
　
　
　 　
　

このようにtableの中にtableを使用し、tableを駆使していけばどのようなレイアウトでも可能になる。


tableは永久に不滅だぁ！！！！！


実際には現在はcss(スタイルシート)を使用した書き方が一般的です。