楽天広場HTML講座・テーブルをヨコに並べる

100万ポイント山分け！1日5回検索で1ポイントもらえる

3929822

HOME | DIARY | PROFILE

2006.07.16

テーマ：ホームページ作成の悩み(550)

カテゴリ： HTMLタグ（テーブル）

・テーブルをつかう

前回は、テーブルの位置を指定する方法でした。
今回からは、テーブルをヨコに並べる方法を学んでいきましょう。

たとえば次の例を見てください。

●

○

●

○

このようにテーブルが並んでいます。
いったいどうやって並べているのでしょう。

最も簡単な方法は、一つ目のテーブルに「 align="left" 」を設定します。

&LT;table border="1" bgcolor="#ffcc99" align="left" &GT;
&LT;tr&GT;&LT;td&GT;●&LT/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;&LT;/table&GT;

&LT;table border="1" bgcolor="#ffcc99"&GT;
&LT;tr&GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;&LT;/table&GT;

こんな感じですね。これでテーブルが並びます。

ただ今回は、レイアウト力をつけるために、あえて面倒な方法をもうひとつ学びます。
それは、このテーブル自体をマス目のひとつ、
つまり、一マスに入る文字と同じように考えてしまう方法です。

ということは・・・
「 td 」のなかに、このテーブル自体を入れちゃうのです。

イメージとしては
&LT;table&GT;&LT;tr&GT; &LT;td&GT; ● ○ &LT;/td&GT; &LT;/tr&GT;&LT;/table&GT;

という感じに「 td 」のなかに入ります。

今回は

● ○

がヨコにふたつなので

&LTtable&GT;&LT;tr&GT; &LT;td&GT;● ○&LT;/td&GT; &LT;td&GT;● ○&LT;/td&GT; &LT;/tr&GT;&LT;/table&GT;

というイメージになります。

これをきちんと書くとこんな感じ。

●

○

●

○

↓
&LT;table&GT;
&LT;tr&GT;
&LT;td&GT;
&LT;table border="1" bgcolor="#ffcc99"&GT;&LT;tr&GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;&LT;/table&GT;
&LT;/td&GT;
&LT;td&GT;
&LT;table border="1" bgcolor="#ffcc99"&GT;&LT;tr&GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;&LT;/table&GT;
&LT;/td&GT;
&LT;/tr&GT;
&LT;/table&GT;

「 td 」のなかに「 &LT;table&GT;&LT;tr&GT;&LT;td&GT;～&LT;/td&GT;&LT;/tr&GT;&LT;/table&GT; 」が
まるごと入っています。

「 td 」を増やせば、ヨコに並べるテーブルの数もどんどん増やせます。

ちなみにこのとき、テーブルの高さがバラバラになってしまうときは、
&LT;table&GT;&LT;tr valign="top"&GT; のように、
「valign=""」属性を赤色部分の「tr」にいれてみましょう！！

次回は同じようにテーブルをタテに増やしてみますよ！！

具体的なやり方は次回に。

[ トップページへ戻る ]

[ 次のページ⇒ ]

お気に入りの記事を「いいね！」で応援しよう