CSSを使用してテーブルにボーダーを追加する方法

方法1: borderプロパティを使用する方法 CSSのborderプロパティを使用して、テーブルにボーダーを追加することができます。以下は、基本的な例です。

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

上記のコードでは、table要素とその内部のすべてのth要素とtd要素に対して、黒色の1ピクセルのボーダーが適用されます。border-collapse: collapse;は、セル間のボーダーを結合して1本のボーダーとして表示するためのスタイルです。

方法2: クラスを使用する方法 異なるスタイルのテーブルに異なるボーダーを適用する場合は、クラスを使用することができます。以下は、クラスを使用した例です。

.table-bordered {
  border-collapse: collapse;
}
.table-bordered th, .table-bordered td {
  border: 1px solid black;
}

上記のコードでは、table-borderedというクラスを持つテーブルにボーダーが適用されます。.table-borderedクラスのth要素とtd要素には、黒色の1ピクセルのボーダーが適用されます。

方法3: ボーダースタイルをカスタマイズする方法 さらに、ボーダースタイルをカスタマイズすることもできます。以下は、ボーダーカラーやボーダーサイズなどを指定した例です。

.table-custom {
  border-collapse: collapse;
}
.table-custom th, .table-custom td {
  border: 2px dashed blue;
  padding: 5px;
}

上記のコードでは、.table-customクラスを持つテーブルには、青色の2ピクセルの点線ボーダーが適用されます。また、セルの内側には5ピクセルの余白（padding）が設定されます。

これらは、テーブルにボーダーを追加するためのいくつかの基本的な方法とコード例です。デザインの要件に合わせてスタイルをカスタマイズすることもできます。