【HTML】TABLEタグで線が2重になる-線が重ならないとき

2024年7月11日2024年7月30日

皆さんこんにちは！IWACODEの岩村です。

今回はTABLEタグの罫線について解説いたします。

WEBサイト上で料金表や時間割などの表を作成する際に使用するTABLEタグですが、

TABLEタグで罫線を引いたとき以下のような表示になったことはないでしょうか。TABLEタグにはとあるプロパティの初期値の影響で、borderプロパティで罫線を引くと以下のような状態になってしまいます。

  <table>
    <tr>
      <th>見出し</th>
      <th>見出し</th>
      <th>見出し</th>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
  </table>

  <style>
    table {
      width: 500px;
    }

    th,
    td {
      padding: 1em 0;
      background-color: #eee;
      border: 1px solid #999;
    }

    td {
      text-align: center;
    }
  </style>

border-collapseプロパティについて

セルとセルの間に謎の間隔が生まれるのは、TABLEタグのborder-collapseプロパティが影響しています。

border-collapseプロパティの値が初期値ではseparateになっているため間隔があいています。

間隔を埋めるためにはTABLEタグに以下のように指定します。

  <table>
    <tr>
      <th>見出し</th>
      <th>見出し</th>
      <th>見出し</th>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
  </table>

  <style>
    table {
      width: 500px;
      border-collapse: collapse;  /* 追加 */
    }

    th,
    td {
      padding: 1em 0;
      background-color: #eee;
      border: 1px solid #999;
    }

    td {
      text-align: center;
    }
 </style>

border-collapse: collapse;

このプロパティ、値を指定することで、セルとセル間の間隔を消すことができます。

セルとセルの線が重なって見栄えがスッキリしますね。

セルとセルの間隔を空けて見せるには

WEBサイトのデザインにもよりますが、基本的にTABLEタグではborder-collapse: collapseで指定してコーディングすることが多いです。

セルとセルの間隔があいているような表をデザインすることもありますが、そのような場合でもborder-collapse: collapseを指定して、罫線を白にするなど間隔があいているように見せることもできます。

以下はborderプロパティで白線で間隔を空けています。

  <table>
    <tr>
      <th>見出し</th>
      <th>見出し</th>
      <th>見出し</th>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
    <tr>
      <td>内容</td>
      <td>内容</td>
      <td>内容</td>
    </tr>
  </table>

  <style>
    table {
      width: 500px;
      border-collapse: collapse;
      /* 追加 */
    }

    th,
    td {
      padding: 1em 0;
      border: 3px solid #fff;
    }

    th {
      background-color: bisque;
    }

    td {
      text-align: center;
      background-color: #f5f5f5;
    }
  </style>

このように記載することによって間隔を空けて見せることも可能です。