複雑なテーブルのサンプル・・・１





１Ａ１Ｂ１Ｃ
２Ａ２Ｂ２Ｃ
３Ａ３Ｂ
ＸYＺ
ａｂｃ
１２３
3C
4A4B4C
5A5B5C



ソース


緑色の文字は外側の大きなテーブル、
赤色の文字はセル「３Ｂ」内の小さなテーブルの表組みになっています。
表の入れ子はいくつでもできますが、ソースが複雑になるので、
改行や頭を揃えることで自分でわかりやすいように書くことが大事です。
後で見ても、よくわかるようにしておきましょう。


<table border="1" width="550" height="400" bgcolor="mediumaquamarine">

<tr height="50"><th width="125">1A</th><th>1B</th><th width="125">1C</th></tr>

<tr><td>2A</td><td>2B</td><td>2C</td></tr>

<tr height="200"><td>3A</td><td>3B<br>

<center>

<table border="1" width="200" height="150" bgcolor="ghostwhite" bordercolor="tomato">

<tr><td>Ｘ</td><td>Ｙ</td><td>Ｚ</td></tr>

<tr><td>ａ</td><td>ｂ</td><td>ｃ</td></tr>

<tr><td>１</td><td>２</td><td>３</td></tr>

</table>

</center>

</td><td>3C</td></tr>

<tr><td>4A</td><td>4B</td><td>4C</td></tr>

<tr><td>5A</td><td>5B</td><td>5C

</td></tr></table>





解　　説


最初に、シンプルな表組みだけしておく
後から、全体のバランスを考えてサイズを指定
これは、途中でいくらでも変更できる

外側の大きなテーブルのサイズを５５０×４００ピクセルに指定
Ａ列とＣ列の幅を１２５ピクセルにした
したがって、Ｂ列の幅は自動的に５５０−２５０＝３００ピクセルになる

各行（第３行以外）の高さを５０ピクセルに指定
したがって第３行の高さは自動的に４００−２００＝２００ピクセルとなる
セル「３Ｂ」内の小さなテーブルのサイズを２００×１５０ピクセルに指定
入れ子の表をセンタリングに指定

後は、背景色や、セル内の文字編集など細かいことをする

後からいろいろ編集したり変更したりするために、
改行や頭を揃えることで自分でわかりやすいように書くことが大事です。
後で見ても、よくわかるようにしておきましょう。


「表を作ろう」へ戻る