複数の行にまたがったセル
テーブルの作成方法は理解できましたか?
しかし実際にはもっと別の区切り方が必要ですよね。
| 1列目 | 1行2列目 | 1行3列目 |
| 2行2列目 | 2行3列目 | |
| 3行2列目 | 3行3列目 |
こんな風な表使うことありますよね。早速ソースを見てみましょう。テーブルの部分だけです。
<table border=”1″ align=”center”>
<tr>
<td rowspan=”3″>1列目</td>
<td>1行2列目</td>
<td>1行3列目</td>
</tr>
<tr>
<td>2行2列目</td>
<td>2行3列目</td>
</tr>
<tr>
<td>3行2列目</td>
<td>3行3列目</td>
</tr>
</table>
上記のように<td>の中にまたがるセルの数を指定してやります。この場合は3つのセルにまたがっているのでrowspan=”3″と書きます。そして<tr>で囲まれた部分が全部で3つ必要となります。
複数の列にまたがったセル
続いてもうひとつのパターンです。これも良くありそうですね。
| 1行目 | ||
| 2行1列目 | 2行2列目 | 2行3列目 |
| 3行1列目 | 3行2列目 | 3行3列目 |
HTMLソースはどのようになっているかというと、
<table border=”1″ align=”center”>
<tr>
<td colspan=”3″>1行目</td>
</tr>
<tr>
<td>2行1列目</td>
<td>2行2列目</td>
<td>2行3列目</td>
</tr>
<tr>
<td>3行1列目</td>
<td>3行2列目</td>
<td>3行3列目</td>
</tr>
</table>
このようにするときには<td>にcolspan=”3″を書き加えます。そしてその下に指定した数だけのセルを作ります。
もっと複雑なテーブル
そしてこれらを組み合わせるとこんな表も出来ますね。
| 1行1列目 | 1行2列目 | |
| 2行1列目 | 2行2列目 | 2行3列目 |
| 3行2列目 | 3行3列目 | |
HTMLはこんな風になります。
<table border=”1″ align=”center”>
<tr>
<td>1行1列目</td>
<td colspan=”2″>1行2列目</td>
</tr>
<tr>
<td rowspan=”2″>2行1列目</td>
<td>2行2列目</td>
<td>2行3列目</td>
</tr>
<tr>
<td>3行2列目</td>
<td>3行3列目</td>
</tr>
</table>
いろいろ試してみて使いこなせるようになると便利です。さて次に各セルの中の文字の行揃えです。 これは単純ですからすぐわかるでしょう。
