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

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

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

よい使い方

<table>
  <tr>
    <th>見出し</th>
    <td>説明</td>
  </tr>
</table>

よくない使い方

<table>
  <tr>
    <td>
      (ここにデザインのためだけにいろいろなことを入れる)
    </td>
    <td>
      (ここにデザインのためだけにいろいろなことを入れる)
    </td>
  </tr>
</table>

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>