ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【HTML】tableレイアウトがいけない理由【コーディング】

【HTML】tableレイアウトがいけない理由【コーディング】

tableレイアウトがいけないということはコーディングをする人であれば必ず聞いたことがあると思います。
その理由について考えてみました。

目次
  1. なぜtableレイアウトがいけないのか
    1. 仕様で表に使うタグと決まっているから
    2. 構造上入れ子でないのでSEO的によくない
    3. レスポンシブに対応するのが難しい

なぜtableレイアウトがいけないのか

tableレイアウトがいけない理由です。

  • 仕様で表に使うタグと決まっているから
  • 構造上入れ子でないのでSEO的によくない
  • レスポンシブに対応するのが難しい

仕様で表に使うタグと決まっているから

シンプルに表に使うタグと決まっているからです。
それだけで終わると話にならないので、では、なぜtableレイアウトをする必要があったのかというと、昔はとても使い勝手のいい便利なタグだったからです。
上下中央にしやすかったり、横幅もいい感じに自動で調整してくれたりしてします。
そんなに便利ならtable使っていいように思いますが、いけない理由は次の項目につながります。

2020年現在、tableタグを使わなくてもcssのdisplay:flex;を使えばtableタグ以上にとても便利です。

よい使い方
<table>
  <tr>
    <th>見出し</th>
    <td>説明</td>
  </tr>
</table>
よくない使い方
<table>
  <tr>
    <td>
      (ここにデザインのためだけにいろいろなことを入れる)
    </td>
    <td>
      (ここにデザインのためだけにいろいろなことを入れる)
    </td>
  </tr>
</table>

構造上入れ子でないのでSEO的によくない

htmlはコンテンツを構造化して、意味がわかるようにすることが理想です。
これによって検索エンジンに正しく理解してもらえ、seoに好影響があります。
tableタグを使うと入れ子の中に必ず見出し、説明という構造にならないのですごく気持ち悪い構造になります。

この場合はtableでも構造がわかりやすい
<table>
  <tr>
    <th>タイトル</th>
    <td>説明</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>説明</td>
  </tr>
</table>
この場合はtableでも構造がわかりにくい
<table>
  <tr>
    <th>タイトル</th>
    <th>タイトル</th>
  </tr>
  <tr>
    <td>説明</td>
    <td>説明</td>
  </tr>
</table>

レスポンシブに対応するのが難しい

表としてtableは使ってもいいのですが、列が増えてくるとレスポンシブに対応することがとても難しいです。

経験的に2列以上の表でtableタグを使うのはレスポンシブが難しくなるので、dl,dt,ddを使っていくこともやむをえないと思っています。

tableにrowspan、colspanを使ってしまうともうレスポンシブにすることは絶望的な感じがしてしまいます。
横スクロールであればできなくはないですが、ユーザビリティがいいかどうかは疑問です。

<table>
  <tr>
    <th>タイトル</th>
    <th>タイトル</td>
    <th>タイトル</th>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>説明</td>
    <td>説明</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>説明</td>
    <td>説明</td>
  </tr>
</table>

tableタグは非推奨なわけではないので、適切な使用用途を判断していくことが重要だと思います。