七鍵＠楽天

今日は久しぶりにテーブルを勉強しましょう(￣▽￣人)
とは言いましても、既に解説したことの復習です。
セルの結合ってどうするのか覚えていますか？
これも知っていると意外と便利ですよ(〃⌒▽⌒)

□ 横方向の結合１

<table border="1">
<tr>
<td colspan=2>○</td>
<td>×</td></tr>
<tr><td>×</td><td>○</td><td>×</td></tr>
<tr><td>○</td><td>×</td><td>×</td></tr>
</table>

□ 表示サンプル

○		×
×	○	×
○	×	×

横方向にセルを結合したい場合は「colspan」にて指定します。
この「colspan」に「2」を指定した場合は、セルがテーブルの列を 2 つ使用することを示します。

□ 横方向の結合２

<table border="1">
<tr>
<td colspan=3>○</td>
</tr>
<tr><td>×</td><td>○</td><td>×</td></tr>
<tr><td>○</td><td>×</td><td>×</td></tr>
</table>

□ 表示サンプル

○
×	○	×
○	×	×

同様に「colspan」に「3」を指定した場合は、セルがテーブルの列を 3 つ使用することを示します。
気をつけてもらいたいのは、（当たり前なのですが）セルを結合するとセルの数が一つ減ります。
３つのセルを結合した場合には、２つのセルがなくなっているということを忘れないで下さい。
そうしないといびつな形のテーブルができあがってしまいます(´･ω･`)

□ 縦方向の結合

<table border="1">
<tr>
<td colspan=3>○</td>
</tr>
<tr><td>×</td>
<td rowspan=2>○</td>
<td>×</td></tr>
<tr><td>×</td><td>×</td></tr>
</table>

□ 表示サンプル

○
×	○	×
×		×

縦方向にセルを結合したい場合は「rowspan」を使います。
使用方法や注意事項は「colspan」と同様です。
セルが減ったときのつじつまが合うようにだけ気をつけて下さい(￣▽￣人)

□ 縦と横方向の結合

<table border="1">
<tr><td>○</td><td>×</td><td>×</td></tr>
<tr><td>×</td>
<td rowspan=2 colspan=2>○</td>
</tr>
<tr><td>×</td></tr>
</table>

□ 表示サンプル

○	×	×
×	○
×

「rowspan」と「colspan」の両方を指定することにより
縦方向と横方向のセルを結合することもできます。


どうでした？
慣れれば簡単なのですがどうも最初はとっつきにくいようです。
この手段もいろいろ応用できますので
いざと言うときにはこちらまでお越し下さい（笑
では、またあしたー(ﾟ▽^*)ﾉ⌒☆