【HTML】テーブルのセルを結合する（縦方向・横方向）

テーブルのセルを縦方向に結合する

HTMLで、テーブルのセルを縦方向に結合するには、rowspan属性を使います。

いくつ分のセルを結合したいかをrowspan属性の値に指定しましょう。

<td rowspan="{結合したい数}">サンプル</td>

サンプルコード

<table>
  <tr>
    <th>サンプル</th>
    <th>サンプル</th>
    <th>サンプル</th>
  </tr>
  <tr>
    <td rowspan="2">縦方向に結合する</td>
    <td>サンプル</td>
    <td>サンプル</td>
  </tr>
  <tr>
    <td>サンプル</td>
    <td>サンプル</td>
  </tr>
</table>

出力されるテーブル

サンプル	サンプル	サンプル
縦方向に結合する	サンプル	サンプル
	サンプル	サンプル

テーブルのセルを横方向に結合する

HTMLで、テーブルのセルを横方向に結合するには、colspan属性を使います。

いくつ分のセルを結合したいかをrowspan属性の値に指定しましょう。

<td colspan="{結合したい数}">サンプル</td>

サンプルコード

<table>
  <tr>
    <th colspan="3">横方向に結合する</th>
  </tr>
  <tr>
    <td>サンプル</td>
    <td>サンプル</td>
    <td>サンプル</td>
  </tr>
  <tr>
    <td>サンプル</td>
    <td>サンプル</td>
    <td>サンプル</td>
  </tr>
</table>

出力されるテーブル

横方向に結合する
サンプル	サンプル	サンプル
サンプル	サンプル	サンプル

縦方向のセル結合と横方向のセル結合を組み合わせる

HTMLのテーブルセルの結合は、縦と横を組み合わせることもできます。

サンプルコード

<table>
  <tr>
    <th colspan="3">横方向に結合する</th>
  </tr>
  <tr>
    <td rowspan="2">縦方向に結合する</td>
    <td>サンプル</td>
    <td>サンプル</td>
  </tr>
  <tr>
    <td>サンプル</td>
    <td>サンプル</td>
  </tr>
</table>

出力されるテーブル

横方向に結合する
縦方向に結合する	サンプル	サンプル
	サンプル	サンプル

テーブルを作成してくれるツール

HTMLのtableタグを自動で生成してくれるツールもあります。

Table Tag Generator

テーブルの構造が複雑で自分で再現するのが難しい場合や、面倒臭いという人にはおすすめです。

まとめ

HTMLのテーブルのセルを結合するには、以下の属性を利用します。

• 縦方向のセル結合・・・rowspan属性
• 横方向のセル結合・・・colspan属性

それぞれの値には、結合したいセルの数を指定しましょう。