HTML テーブルの境界線

HTMLテーブルの境界線（ボーダー）を設定することで、データの区切りを明確にし、視認性の高いUIを構築できます。モダンなWeb開発では、これらの装飾はすべてCSSで行うのが鉄則です。

1. 境界線の追加 (The border Property)

テーブルに境界線を表示するには、CSSの border プロパティを使用します。この際、<table> 要素だけでなく、<th>（ヘッダーセル）や <td>（データセル）に対しても境界線を定義するのが一般的です。

1.1 基本的な境界線の実装例

table, th, td {
  border: 1px solid black;
}

このコードを適用すると、テーブル全体とすべてのセルに「1ピクセルの黒い実線」が引かれます。

2. 境界線の結合 (Border Collapse)

デフォルトの状態では、各セルの周囲に独立した境界線が表示されるため、隣り合うセルとの間に隙間ができ、二重線のように見えてしまいます。

これを1本のスッキリとした線にまとめたい場合は、border-collapse プロパティを使用します。

2.1 border-collapse プロパティの使用

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

border-collapse: collapse; を指定することで、隣接するセルの境界線が「崩壊（結合）」し、1本の線としてレンダリングされます。現在のWebデザインでは、この設定がほぼデファクトスタンダードと言えるでしょう。

3. 境界線のスタイル設定 (Border Style)

border-style プロパティを変更することで、境界線の見た目をドット状やダッシュ（破線）状にカスタマイズできます。

th, td {
  border-style: dotted; /* ドット（点線） */
  border-style: dashed; /* ダッシュ（破線） */
  border-style: solid;  /* 実線（デフォルト） */
  border-style: double; /* 二重線 */
}

もちろん、一括指定プロパティを使用して border: 2px dashed blue; のように記述することも可能です。

4. 境界線の色 (Border Color)

border-color プロパティを使用すれば、ブランドカラーに合わせた色指定が可能です。

th, td {
  border: 1px solid red; /* 赤い境界線 */
}

特定の方向（例えば下側だけ）に色をつけたい場合は、border-bottom プロパティなどを個別に指定します。

5. 角丸の境界線 (Round Table Borders)

テーブルの角を丸くしてモダンな印象を与えたい場合は、border-radius プロパティを使用します。

5.1 実装の注意点

border-radius を適用する際、border-collapse: collapse; が設定されていると角丸が正しく表示されないという仕様上の制約があります。角を丸くしたい場合は、個別のセルではなく、テーブル全体の枠組みに対して設定するのがスムーズです。

table {
  border: 1px solid black;
  border-radius: 10px; /* 10ピクセルの角丸 */
}

もし、特定のセルの背景色も含めて角を丸くしたい場合は、CSSの疑似クラス（:first-child や :last-child）を組み合わせて緻密に制御する必要があります。

6. まとめ

境界線のデザイン一つで、テーブルの清潔感やプロフェッショナルな雰囲気は大きく変わります。用途に応じて、これらのプロパティを使い分けてみてくださいね。