tableタグは使わない？どんな時に使う？使用するケースについて解説

2024年2月19日2024年7月30日

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

今回はtableタグについて、どのようなときに使用するのが良いのか、tableタグを使用しない場合はどのようにするのかについて解説していきます。

tableタグを知らない･･･、勉強中でまだよくわかっていない･･･、といった方は以下の記事にて基本的な記載方法について解説しておりますので、参考にして頂けますと幸いです！

tableタグを使用するケース

縦と横に見出しがついているレイアウト

筆者

次のような表の場合、tableタグを使用したほうがよいと考えております。

上記のような表の場合、見出しが上と左についているため、スマホ対応（レスポンシブ対応）がしづらいです。

スマホで表示する場合は、そのまま表を小さくするととても見づらくなってしまうため、入りきれない部分を横スクロールで対応するなど、別途CSSで調整する必要が出てきます。

一部が結合されているようなレイアウト

筆者

Excelの結合のように、複数行、列にまたがって表示されているようなレイアウトの場合も、tableタグが用いられます。

tableタグの属性である、rowspanやcolspanによって、結合されているパタンです。

tableタグを使用せずにこれらを実装しようとすると、CSSの指定が複雑になってしまうため、tableタグを使用したほうが、メンテナンスも楽になります。

tableタグを使用しないケース

tableタグを使用しないレイアウトはどのようなものがありますか？

筆者

上か横、どちらかにしか見出しがないレイアウトになりますね！
この場合、レスポンシブ対応もしやすく、逆にtableタグを使用する必要もないです。

上か横、どちらかにしか見出しがないレイアウト

なるほど・・・このような表やレイアウトはよく見かけますね！

筆者

スマホ対応の場合もそれぞれの列を縦に並べるなど、横スクロールにする必要がない場合も多いですね！

tableタグを使用しない場合は、どのようなタグを使用するのでしょうか？

筆者

tableタグを使用しない場合は、dl,dt,ddタグを使用する場合が多いですね！これらのタグを使用する場合は以下のようなイメージで使用します。

以下のコードはdlタグを使用して表を作成した一例になります。

  <div class="box">
    <div class="left">
      <h2>横に見出しがある表</h2>
      <dl>
        <dt>見出し</dt>
        <dd>データ</dd>
        <dd>データ</dd>
        <dt>見出し</dt>
        <dd>データ</dd>
        <dd>データ</dd>
        <dt>見出し</dt>
        <dd>データ</dd>
        <dd>データ</dd>
      </dl>
    </div>

    <div class="right">
      <h2>縦に見出しがある表</h2>
      <div class="inner">
        <dl>
          <dt>見出し</dt>
          <dd>データ</dd>
          <dd>データ</dd>
          <dd>データ</dd>
        </dl>
        <dl>
          <dt>見出し</dt>
          <dd>データ</dd>
          <dd>データ</dd>
          <dd>データ</dd>
        </dl>
        <dl>
          <dt>見出し</dt>
          <dd>データ</dd>
          <dd>データ</dd>
          <dd>データ</dd>
        </dl>
      </div>
    </div>
  </div>

  <style>
    body {
      padding: 32px;
    }

    .box {
      display: flex;
      flex-direction: column;
      gap: 100px;
    }

    .box h2 {
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 20px;
    }

    /* 横に見出しがある表 */
    .box .left {
      width: 50%;
      text-align: center;
    }

    .box .left dl {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }

    .box .left dl dt {
      background-color: #9AD4FF;
      width: 33%;
      padding: 10px 0;
      margin: 1px;
    }

    .box .left dl dd {
      background-color: #FFF8DF;
      width: 33%;
      padding: 10px 0;
      margin: 1px;
    }


    /* 縦に見出しがある表 */
    .box .right {
      width: 50%;
      text-align: center;
    }

    .box .right .inner {
      display: flex;
    }

    .box .right dl {
      width: 33%;
      margin: 1px;
    }

    .box .right dl dt {
      background-color: #9AD4FF;
      width: 100%;
      padding: 10px 0;
      margin: 1px;
    }

    .box .right dl dd {
      background-color: #FFF8DF;
      width: 100%;
      padding: 10px 0;
      margin: 1px;
    }
  </style>