CSSでtableの境界線（ボーダー）を設定する方法

HTMLのテーブル要素にCSSを使用して境界線（ボーダー）を設定することで、見た目を整えることができます。

この記事では、table 要素にボーダーを適用する方法や、ボーダーのスタイルを調整するさまざまな方法を解説します。

方法
まとめ

方法

ここから、CSSでtableの境界線（ボーダー）を設定する方法を詳しくみていきます。

1. 基本的なテーブルの境界線の設定

テーブルのセルとセルの間に境界線を設定するには、border プロパティを使用します。

例: テーブル全体に境界線を追加する

<table>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
</table>

table {
    border-collapse: collapse; /* セルの境界線を結合 */
    width: 100%; /* テーブルの幅 */
}

td, th {
    border: 1px solid black; /* セルに境界線を追加 */
    padding: 8px; /* セル内の余白を指定 */
}

説明:

border-collapse: collapse;
テーブルのセルの境界線が重なった場合、1本の線にまとめます（これにより、セル同士の間にダブルボーダーが表示されるのを防ぎます）。
border: 1px solid black;
セルに1pxの実線（solid）で黒（black）の境界線を適用します。
padding: 8px;
セル内のコンテンツに余白を設定します。

2. 個別のセルやヘッダーに異なる境界線を適用する

ヘッダーセル（<th>）や特定のセル（<td>）に異なるスタイルを適用することも可能です。

例: ヘッダーとボディセルに異なるスタイルを適用

<table>
  <thead>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </tbody>
</table>

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    border: 2px solid black; /* ヘッダーセルに太い境界線を追加 */
    background-color: #f2f2f2; /* ヘッダーセルの背景色を設定 */
    padding: 10px;
}

td {
    border: 1px solid gray; /* 通常のセルに細い境界線を追加 */
    padding: 8px;
}

3. テーブルの外枠のみ境界線を表示する

テーブル全体に境界線を設定することも可能です。

セルごとのボーダーではなく、テーブル自体の外枠だけに境界線を表示したい場合、次のようにします。

例: テーブル全体の外枠にのみ境界線を表示

table {
    border: 2px solid black; /* テーブル全体に境界線を追加 */
    border-collapse: collapse;
    width: 100%;
}

td, th {
    padding: 8px;
}

4. セルの内側だけ境界線を設定する

テーブルの外枠には境界線を設定せず、セルの内側の境界線だけを表示することもできます。

例: テーブルの内側のセルだけに境界線を表示

table {
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid black; /* セルに境界線を追加 */
    padding: 8px;
}

table {
    border: none; /* テーブルの外枠は非表示 */
}

5. ボーダーのスタイルをカスタマイズする

border プロパティのスタイルは、線の太さ（border-width）、線の種類（border-style）、色（border-color）をカスタマイズすることができます。

例: ボーダースタイルを変更

table {
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 2px dashed blue; /* 青の破線を追加 */
    padding: 8px;
}

solid: 実線。
dashed: 破線。
dotted: 点線。
double: 二重線。

6. CSSでテーブルの行や列にのみボーダーを追加する

特定の行や列にだけボーダーを適用する場合は、nth-child セレクタを使います。

例: 偶数行にのみボーダーを追加

table {
    border-collapse: collapse;
    width: 100%;
}

tr:nth-child(even) td {
    border: 1px solid black; /* 偶数行のセルにのみボーダーを追加 */
}

td {
    padding: 8px;
}

奇数行にのみボーダーを追加する場合は、「even」ではなく「odd」を使用します。