楽天広場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">」としたとき:数字1数字一2ニ3三4四→(「<table border="1" cellpadding="4"><tr><td rowspan="4" valign="top">数字</td><td>1</td><td rowspan="4" valign="top">数字</td><td>一</td></tr><tr><td>2</td><td>ニ</td></tr><tr><td>3</td><td>三</td></tr><tr><td>4</td><td>四</td></tr></table> 」と入力)このようにタテのマス目をつなげることができました。※rowspanの設定はまたがる項目ごとにします。※数字の位置を上に表示するために「valign="top"」のタグも使用しました。「td」のかわりに「th」でもつかえます。同じように「th rowspan=""」と入力します。[トップページへ戻る][次のページ⇒]