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

2007.02.15

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

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

・テーブルをつかう

■ マス目をヨコにつなげる

前回は、テーブルの並べ方（応用編）でした。
今回は、マス目をヨコにつなげる方法を学んでいきましょう。

マス目をヨコにつなげるときは「colspan」属性をつかいます。

今回は今までとちがい、「table」にではなく、「td」に属性を合わせています。
属性値には「つなげる「マス目」の数」をいれます。

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

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

なにも指定しない状態：

●	○	●
□	■	□

→

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

「<colspan="2">」としたとき：

●		●
□	■	□

→

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

「<colspan="3">」としたとき：

●
□	■	□

→

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

「<colspan="5">」
「<colspan="2">」としたとき：

●
□	■	□	■	□
■		□		■
□

→

（「<table border="1">
<tr><td colspan="5">●</td></tr>
<tr><td>□</td><td>■</td><td>□</td><td>■</td><td>□</td></tr><tr><td colspan="2">■</td><td colspan="2">□</td><td>■</td></tr><tr><td colspan="5">□</td></tr>
</table>」と入力）

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

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

次回は同じように、タテのマス目をつなげる方法です。

[トップページへ戻る]

[次のページ⇒]

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

Last updated 2008.12.21 07:59:15

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

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

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