HTML | テーブルのセルを縦、横に結合する

2023-05-23HTML テーブル,HTML

HTMLでテーブルのセルを縦、横に結合するサンプルコードを紹介しています。

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

HTMLのテーブル要素でセルを縦に結合する結合するには「rowspan」属性を利用します。
「rowspan」属性は指定された値の数だけ、そのセルの高さを確保します。

例えば、以下のように1行1列目のセルの高さを2セル分確保した場合、テーブルのレイアウトを維持する為に2行1列目のセルは省略する事になります。

<table>
  <tr>
    <td rowspan="2">1、4</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

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

HTMLのテーブル要素でセルを縦に結合する結合するには「colspan」属性を利用します。
「colspan」属性は指定された値の数だけ、そのセルの幅を確保します。

例えば、以下のように1行2列目のセルの幅を2セル分とした場合、テーブルのレイアウトを維持するには3つ目のセルは省略する事になります。

<table>
  <tr>
    <td>1</td>
    <td colspan="2">2、3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>