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

2007.02.18

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

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

・テーブルをつかう

■ マス目をタテにつなげる

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

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

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

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

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

なにも指定しない状態:

●	○
□	■
▲	△

→

（「<table border="1">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
<tr><td>▲</td><td>△</td></tr>
</table>」と入力）

「<rowspan="2">」としたとき:

●	○
●	■
▲	△

→

（「<table border="1">
<tr><td rowspan="2">●</td><td>○</td></tr>
<tr><td>■</td></tr>
<tr><td>▲</td><td>△</td></tr>
</table>」と入力）

「<rowspan="3">」としたとき:

●	○
	■
	△

→

（「<table border="1">
<tr><td rowspan="3">●</td><td>○</td></tr>
<tr><td>■</td></tr>
<tr><td>△</td></tr>
</table>」と入力）

「<rowspan="4">」
「<rowspan="4">」としたとき:

数字	１	数字	一
	２		ニ
	３		三
	４		四

→

（「<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=""」と入力します。

[トップページへ戻る]

[次のページ⇒]

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

Last updated 2008.12.21 08:00:50

[HTMLタグ（テーブル）] カテゴリの最新記事

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

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