CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでテーブルに罫線（ボーダー）を追加する方法

CSSでテーブルに罫線（ボーダー）を追加するには、borderプロパティを使用します。テーブル全体だけでなく、見出しセル（th）やデータセル（td）に対しても個別に罫線を指定できます。

例1：テーブル全体とすべてのセルに同じ罫線を適用する

まずは、table・th・tdのすべての要素に一括で罫線を設定する基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 2px dashed orange;
}
</style>
</head>
<body>
<h2>チームランキング表</h2>
<table>
<tr>
<th>チーム</th>
<th>順位</th>
<th>ポイント</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

出力結果

CSSでテーブルに罫線（ボーダー）を追加する方法

このように、border: 2px dashed orange; を指定することで、太さ2ピクセルのオレンジ色の破線がテーブル全体と各セルに適用されます。罫線のスタイルはsolid（実線）、dashed（破線）、dotted（点線）などから選択できます。

例2：外枠とセルの罫線をそれぞれ別々に指定する

次に、テーブルの外枠と内側のセルで異なるスタイルの罫線を設定する例を見てみましょう。tableセレクタには太めのオレンジ色の破線を、thとtdには細めの緑色の破線を指定します。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border: 5px dashed orange;
}
th, td {
    border: 1px dashed green;
}
</style>
</head>
<body>
<h2>チームランキング表</h2>
<table>
<tr>
<th>チーム</th>
<th>順位</th>
<th>ポイント</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

出力結果

CSSでテーブルに罫線（ボーダー）を追加する方法

補足：隣接する罫線を重ねて表示する

デフォルトでは、セル同士の罫線は間隔を空けて二重に表示されます。罫線を1本にまとめてすっきり見せたい場合は、border-collapse: collapse; をtable要素に指定すると便利です。

table {
    border-collapse: collapse;
}

このプロパティを組み合わせることで、より洗練されたテーブルデザインを実現できます。

  1. CSSでテーブルをスタイリングする方法｜主要プロパティと実例コード

    CSSによるテーブルのスタイリングとは HTMLのテーブルは、CSSを使うことで罫線・余白・背景などを自由にデザインできます。<table>要素とその子要素をスタイリングする際には、主に以下のプロパティが使用されます。 border罫線の太さ（border-width）、スタイル（border-style）、色（border-color）をまとめて定義できるプロパティです。 border-collapse隣り合うセルの罫線を1本に共有するか（collapse）、セルごとに独立させるか（separate）を指定します。 caption-side<caption>で付け

  2. CSSのposition: stickyを使ってスクロール時にヘッダーを固定するHTMLテーブルの作り方

    HTMLテーブルでは、CSSのposition: stickyとtop: 0を組み合わせることで、縦方向にスクロールしてもヘッダー行（th要素）が常に画面上部に固定表示されるテーブルを簡単に実装できます。JavaScriptを使わずCSSだけで完結するため、コードもシンプルで保守性が高いのが特徴です。仕組みのポイント固定ヘッダーを実現するには、以下の2点が重要です。テーブル全体を包むコンテナ（div要素など）にoverflow-y: scrollを指定し、スクロール可能な領域を作る。ヘッダーセル（th要素）にposition: stickyとtop: 0を指定し、スクロール位置に追従して上部に