テーブルを横に並べる■ テーブルをヨコに並べるたとえば次の例を見てください。
このようにテーブルが並んでいます。 いったいどうやって並べているのでしょう。 最も簡単な方法は、一つ目のテーブルに「align="left"」を設定します。
こんな感じですね。これでテーブルが並びます。 2つ目は、このテーブル自体をマス目のひとつ、 つまり、一マスに入る文字と同じように考えてしまう方法です。 ということは・・・ 「td」のなか、つまりマス目のなかに 新しいテーブルを作って入れてしまおう・・・という考え方 イメージとしては <table><tr><td> ●○ </td></tr></table> という感じに「td」のなかに入ります。 今回は ● ○ がヨコにふたつなので <table><tr><td> ●○ </td><td> ●○ </td></tr></table> というイメージになります。 これをきちんと書くとこんな感じ。 <table> <tr> <td> <table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table> </td> <td> <table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table> </td> </tr> </table>
「td」のなかに「<table><tr><td>~</td></tr></table>」が まるごと入っています。 「td」を増やせば、ヨコに並べるテーブルの数もどんどん増やせます。 ちなみにこのとき、テーブルの高さがバラバラになってしまうときは、 <table><tr valign="top">のように、 「valign=""」属性を赤色部分の「tr」にいれてみましょう!! |