tableタグでセルを結合するには、ある属性を使えば可能です。
今回は例を見ながらその方法を解説していきます。
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
tableタグでセルを結合する方法
テーブルタグでセルを結合するには、CSSではなくHTML側をいじる必要があります。
また縦方向と横方向で書き方が違うので、今回はその方法もご紹介します。
まずは基本となるコードを見てみます。
See the Pen
テーブルタグ by junpei (@junpei-sugiyama)
on CodePen.
セルを結合する際、行（横方向）か列（縦方向）で使う属性が異なるので分かりやすくしました。
またCSSにあまり見慣れないかも知れないプロパティがあります。
table {
border-collapse: collapse;
}これが無いと以下のようにborderの間に隙間が出来てしまいます。
See the Pen
テーブルタグ（隙間あり） by junpei (@junpei-sugiyama)
on CodePen.
この隙間をなくすには先ほどのborder-collapse: collapse;の1行を書けばOKです。
縦方向のセルを結合する
縦方向のセルを結合するためには、td要素やth要素にrowspan=""を追記します。
"" の中には結合したい数を入れます。
実際に見てみます。
See the Pen
テーブルタグ（縦方向） by junpei (@junpei-sugiyama)
on CodePen.
CodePenのHTMLをクリックすればコードは確認できますが、結合させたい1行2列の tdタグにrowspan="2"を追記しています。
<table>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>1行1列</td>
<td rowspan="2">1行2列</td>
<td>1行3列</td>
<td>1行4列</td>
</tr>
<tr>
<td>2行1列</td>
<!-- <td>2行2列</td> -->
<td>2行3列</td>
<td>2行4列</td>
</tr>
<tr>
<td>3行1列</td>
<td>3行2列</td>
<td>3行3列</td>
<td>3行4列</td>
</tr>
</table>縦方向に2つ分結合するという意味です。
ここで重要なのは『結合させたい箇所』と『隣接する箇所』は削除する必要があるという事です（上記では分かりやすくするために削除する箇所をコメントアウトしています）
上記の場合は2行2列の部分ですね。
もし削除する場所が3行2列やrowspan="3"であったり、削除をしなかったりすると以下のように崩れます（以下は削除しなかった場合です）
See the Pen
テーブルタグ（失敗） by junpei (@junpei-sugiyama)
on CodePen.
もしrowspan="3"の場合は、最初の例で言えば3行2列も削除すれば大丈夫です（縦3マス分が結合されます）
横方向のセルを結合する
横方向の場合はcolspan=""を追記します。
考え方は縦方向の時と同じなので早速見てみましょう。
See the Pen
テーブルタグ（横方向） by junpei (@junpei-sugiyama)
on CodePen.
<table>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>1行1列</td>
<td colspan="2">1行2列</td>
<!-- <td>1行3列</td> -->
<td>1行4列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
<td>2行4列</td>
</tr>
<tr>
<td>3行1列</td>
<td>3行2列</td>
<td>3行3列</td>
<td>3行4列</td>
</tr>
</table>
縦横両方のセルを結合する
また縦横両方のセルを結合させることも可能です。
See the Pen
テーブルタグ（縦横結合） by junpei (@junpei-sugiyama)
on CodePen.
これも基本となるコードからどこを削除するかを間違えないように気を付けましょう。
<table>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
<td>1行4列</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2行1列</td>
<!-- <td>2行2列</td> -->
<td>2行3列</td>
<td>2行4列</td>
</tr>
<tr>
<!-- <td>3行1列</td> -->
<!-- <td>3行2列</td> -->
<td>3行3列</td>
<td>3行4列</td>
</tr>
</table>まとめ
今回はtableタグでセルを結合する方法について解説しました。
どこに何を書いていいのか分かりにくいので、慌てず落ち着いて確認して書きましょう。
以上になります。
