複数のセルにまたがったセル

複数の行にまたがったセル

テーブルの作成方法は理解できましたか?
しかし実際にはもっと別の区切り方が必要ですよね。

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>

いろいろ試してみて使いこなせるようになると便利です。さて次に各セルの中の文字の行揃えです。 これは単純ですからすぐわかるでしょう。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録