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

CSSでテーブルをスタイリングする方法｜枠線・結合・パディングの設定

CSSを使用してテーブルをスタイリングする場合、枠線（ボーダー）の設定、枠線の結合、幅や高さの指定などが可能です。さらに、パディングによるセル内の余白や、テキストの配置（アラインメント）も自由にコントロールできます。ここでは、具体的なサンプルコードを挙げながら、テーブルスタイリングの基本を解説していきます。

例1：テーブルに枠線を追加する

CSSでテーブルに枠線を追加するには、borderプロパティを使用します。以下の例では、table・th・td要素に対して、オレンジ色の破線（dashed）ボーダーを2pxで設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
   border: 2px dashed orange;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</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でテーブルをスタイリングする方法｜枠線・結合・パディングの設定

例2：テーブルの枠線を結合する

デフォルト状態では、隣接するセル同士の枠線が二重に表示されます。これを1本の線にまとめるには、border-collapseプロパティに「collapse」を指定します。以下は、テーブルの枠線を結合する例です。

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border-collapse: collapse;
   background-color: black;
   color: white;
}
th, td {
   border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</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でテーブルをスタイリングする方法｜枠線・結合・パディングの設定

例3：パディングで余白を設定する

枠線とコンテンツ（セル内のテキスト）の間にスペースを設けるには、paddingプロパティを使用します。以下の例では、th・td要素に20pxのパディングを設定し、あわせてtext-alignでテキストを中央揃えにしています。また、table-layout: fixedとwidth: 100%を指定することで、列幅を均等に保ちながらテーブルを画面幅いっぱいに広げています。

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border: 1px solid black;
   background-color: blue;
   color: white;
}
th, td {
   border: 1px solid black;
   padding: 20px;
   text-align: center;
}
table#demo {
   table-layout: fixed;
   width: 100%;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table id="demo">
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</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>
</table>
</body>
</html>

出力結果

CSSでテーブルをスタイリングする方法｜枠線・結合・パディングの設定

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

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

  2. CSSの::first-letter疑似要素で文章の最初の一文字をおしゃれに装飾する方法

    ::first-letter疑似要素とは？ CSSでは、::first-letter（ファーストレター）疑似要素を使うことで、要素の最初の一文字だけを自由に装飾できます。雑誌や書籍の冒頭でよく目にする「ドロップキャップ」と呼ばれる演出効果も、追加のHTMLマークアップや画像を用意することなく、CSSだけで手軽に実現可能です。 なお、::first-letterの適用対象となる「最初の文字」は、句読点などの記号、ダイグラフ（合字）、contentプロパティによって生成されるコンテンツなどが存在する場合には変化することがあるため、注意が必要です。 それでは、CSSの::first-letter疑似