楽天広場HTML講座マス目をタテにつなげる

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

3929794

HOME | DIARY | PROFILE

2007.02.18

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

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

・テーブルをつかう

前回は、マス目をヨコにつなげてみました。
今回は、マス目をタテにつなげる方法です。

「 td 」をタテにつなげるときは「 rowspan 」属性をつかいます。

属性値には「つなげる「 マス目 」をいれます。

これにより、さらにテーブルレイアウトの自由度が格段に広がるのです。

たとえばこの例をみてください。

なにも指定しない状態:

●

○

□

■

▲

△

→

（「&LT;table border="1"&GT;
&LT;tr&GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;▲&LT;/td&GT;&LT;td&GT;△&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

「 &LT;rowspan="2"&GT; 」としたとき:

●

○

■

▲

△

→

（「&LT;table border="1"&GT;
&LT;tr&GT;&LT;td rowspan="2" &GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;▲&LT;/td&GT;&LT;td&GT;△&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

「 &LT;rowspan="3"&GT; 」としたとき:

●

○

■

△

→

（「&LT;table border="1"&GT;
&LT;tr&GT;&LT;td rowspan="3" &GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;△&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

「 &LT;rowspan="4"&GT; 」
「 &LT;rowspan="4"&GT; 」としたとき:

数字

１

数字

一

２

ニ

３

三

４

四

→

（「<table border="1" cellpadding="4"><tr><td rowspan="4" valign="top">数字</td><td>１</td><td rowspan="4" valign="top">数字</td><td>一</td></tr><tr><td>２</td><td>ニ</td></tr><tr><td>３</td><td>三</td></tr><tr><td>４</td><td>四</td></tr></table> 」と入力）

このようにタテのマス目をつなげることができました。

※rowspanの設定はまたがる項目ごとにします。
※数字の位置を上に表示するために
「valign="top"」のタグも使用しました。

「 td 」のかわりに「 th 」でもつかえます。
同じように「 th rowspan="" 」と入力します。

[ トップページへ戻る ]

[ 次のページ⇒ ]

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