テーブルはなんだかんだいろいろと使うことがあります。
しっかり理解しておきましょう。

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

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

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

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>

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

セル内の行揃え
Page Top ↑