マス目をタテにつなげる

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

マス目をタテにつなげる
rowspan=" 属性値 "

「td」をタテにつなげるときは「rowspan」属性をつかいます。
属性値には「つなげる「マス目」の数」をいれます。

さらに今回も、前回と同じく
「table」にではなく、「td」に属性を合わせています。

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

なにも指定しない状態:

●	○
□	■
▲	△

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