【初心者向け】tableタグの使い方！部分的に結合した表を作成する

2024年2月21日

こんにちは。IWACODEの岩村彰斗です。

今回はtableタグの使い方ということで、部分的に結合された表の作成方法について解説させていただきます。

見出しなどが2行になっている表ですね！

筆者

tableタグを使用することで、簡単に実装が可能なのでぜひ覚えていってください。

tableタグの使い方が分からないといった方は、以下の記事で基本的な記載方法をご紹介しております。ご参考いただけますと幸いです。

tableタグで結合する方法

結合を行う際にはthタグ、もしくはtdタグに以下の記載を行います。

<!-- 横方向に結合する場合 -->
<th colspan="2"></th>

<!-- 縦方向に結合する場合 -->
<td rowspan="2"></td>

colspanとrowspanを記載するんですね！

筆者

結合する際には、タグの属性として、開始タグの中に記載します。

colspanとrowspanに「=2」と記載しているのは、2列（col）、または2行（row）結合するかを表しています。

colspanでは何列分広げるか、rowspanでは何行分広げるかを想像していただけると、わかりやすいかと思います。

tableタグを使用した表を作成

見出し部分が結合されたレイアウト

筆者

今回はこのような表を作成していきます。

見出しが２行、２列になっていますね！

筆者

２行になっている部分は、colspanとrowspanを使用して作成します。

  <table>
    <thead>
      <!-- 1行目 -->
      <tr>
        <th colspan="2" rowspan="2"></th>
        <th colspan="2">a</th>
        <th colspan="2">b</th>
      </tr>
      <!-- 2行目 -->
      <tr>
        <th>a1</th>
        <th>a2</th>
        <th>b1</th>
        <th>b2</th>
      </tr>
    </thead>

    <tbody>
      <!-- 3行目 -->
      <tr>
        <th rowspan="2">c</th>
        <th>c1</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!-- 4行目 -->
      <tr>
        <th>c2</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!-- 5行目 -->
      <tr>
        <th rowspan="2">d</th>
        <th>d1</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <!-- 6行目 -->
      <tr>
        <th>d2</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <style>
    thead {
      background-color: #2CA5FF;
      color: #fff;
    }

    th,
    td {
      border-collapse: collapse;
      border: 3px solid #fff;
      padding: 10px;
      text-align: center;
      width: 100px;
    }

    tbody {
      color: #555;
      font-weight: 700;
    }

    tbody th {
      background-color: #2CD9FF;
    }

    tbody td {
      background-color: #FFF8DF;
    }
  </style>

１行目の記載にcolspan=2が３つ入っております。これで２列分の要素を３つ作成しております。

内容部分の１列目は２行分広げる必要があるため、rowspan=2を指定しています。３行目と５行目の１列目にあたる要素に指定しております。

左上の２行２列分枠を取っているところは、非表示にすることで、見えなくすることも可能です。

<th colspan="2" rowspan="2" style="visibility: hidden;"></th>

注意点

colspanとrowspanですが、それぞれ複数列、複数行存在するレイアウトでないと、正しく動作しません。

以下の例をご覧ください。

    <thead>
      <tr>
        <th colspan="2"></th>
        <th></th>
        <th></th>
      </tr>
    </thead>

    <!-- CSS省略 -->

このようにcolspanを２で指定しても、複数行ないため、正しく動作しません。

    <thead>
      <tr>
        <th colspan="2"></th>
        <th></th>
        <th></th>
      </tr>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>