tableのセルの外側に余白を設けたい場合について

Question

HTMLのtableでレイアウトを作成する際に、デザインの自由度があまり高くなくて困る事が多いです。
自由度が高くない分、tableレイアウトでのデータの配置が堅牢に実装できるのかとは思いますが、デザインを実装する際に、tableを用いるべきか、divタグを用いて自由に実装すべきか、中々判断が出来ません。

以下のようなテーブルレイアウトで、header1とheader2の間の余白を広げたいです。

cellspacingやborder-spacingをtable要素に適応すると幅を指定できるかと思いますが、この場合、table全体のセルに影響が出てしまいます。
header1カラムとheader2カラムの間に余白が生まれるのは許容できますが、セルの全方位に余白が生まれてしまうのが許容できません。

また、別要件になりますが、行毎（tr）にborder-bottomを入れる必要があり、その為にtableにborder-collapse: collapse;を指定すると、そもそもborder-spacingは効かなくなります。

このようなレイアウトを作成する場合、tableレイアウトではどのように実装すべきでしょうか？
要件をまとめますと、
・header1とheader2の間の余白を広げたいが、セルの全方位に余白が生まれて欲しくない。
・tbodyのtr要素（行単位）に下線を引きたい。

そもそもtableレイアウトでやるべきでない、というような意見でも大丈夫なので、ご確認いただけますと幸いです。

    <table>
      <thead>
        <tr>
          <th colspan="3">
            header1
          </th>
          <th colspan="3">
            header2
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>th</th>
          <th>th</th>
          <th>ht</th>
          <th>
            th
          </th>
          <th>
            th
          </th>
          <th>
            th
          </th>
        </tr>
        <tr>
          <td>td</td>
          <td>td</td>
          <td>td</td>
          <td>td</td>
          <td>td</td>
          <td>td</td>
        </tr>
      </tbody>
    </table>

Answer 1

tableを用いるべきか、divタグを用いて自由に実装すべきか

マークアップ的にはデザインレイアウト部分にtableを使うべきではないのは当然のこと、divすらも採用の優先度は下げるべきです。
https://webtan.impress.co.jp/e/2021/06/01/39673
CSSで見た目は如何様にも出来るものの、「何でもdiv」では正しいマークアップとは言えません

Answer 2

デザインのためにtableを利用することはマークアップの原則から控えるべきです
tableはあくまでも構造上の表です

Answer 3

そもそもtableレイアウトでやるべきでない、というような意見でも大丈夫なので

今どきであれば、ガチガチに位置を決めて作りたい場合にもグリッドレイアウトという手法が使えるようになっています。意味的に表ではないものをテーブルで組むべきではありません。

Answer 4

他の方もおっしゃっていますが、マークアップとは、 各パーツがどういう役割なのかを指定すること です。
各要素適切なタグを選ばなければなりません。

つまり、表じゃないのに、見た目だけのために<table>タグを使用すべきではありません。

また、<div>や<span>は何の意味もないタグで、CSSで装飾する都合上使うものです。
ですので単体では使用すべきではありません。

例えば、

<!-- 🔺 -->
<div>
  <h2>タイトル</h2>
  <p>本文</p>
  <p>本文</p>
</div>

<!-- ⭕️ -->
<section>
  <div>
    <h2>タイトル</h2>
    <p>文章</p>
    <p>文章</p>
  </div>
</section>

<!-- ❌ -->
<div><span>文章</span></div>

<!-- ⭕️ -->
<p><span>文章</span></p>

Comments

[m.ts10806]

さすがにボタンはbuttonのほうが・・・。例って難しいですね。
pじゃなくarticleのほうがいいというケースもあるし、dt/ddとかも。

[Cocode]

ボタンミスです！ボタンの例を示そうとしてやっぱり変えたので文字書き換えわすれました。修正しましたご指摘ありがとうございます〜！