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

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

CSSによるテーブルのスタイリングとは

HTMLのテーブルは、CSSを使うことで罫線・余白・背景などを自由にデザインできます。<table>要素とその子要素をスタイリングする際には、主に以下のプロパティが使用されます。

  • border
    罫線の太さ（border-width）、スタイル（border-style）、色（border-color）をまとめて定義できるプロパティです。
  • border-collapse
    隣り合うセルの罫線を1本に共有するか（collapse）、セルごとに独立させるか（separate）を指定します。
  • caption-side
    <caption>で付けた表題ボックスを、表の上側または下側のどちらに配置するかを指定します。
  • empty-cells
    内容のない空のセルを表示するか（show）、非表示にするか（hide）を指定します。
  • table-layout
    ブラウザがテーブルの行・列・セルをレイアウトする際に使用するアルゴリズム（auto／fixed）を指定します。

例1：borderプロパティで見出しセルに罫線を付ける

次の例では、IDセレクタを使って特定の<th>要素の右側に太い青色の実線を引いています。あわせて文字間隔（letter-spacing）や中央揃え（text-align）も調整しています。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: 'Bookman Old Style', serif;
}
th {
    letter-spacing: 1.9px;
}
#one {
    border-right: thick solid blue;
}
td {
    text-align: center;
}
</style>
</head>
<body>
<h2>従業員リスト</h2>
<div>
<table>
<tr>
<th id="one">従業員</th>
<th>部署</th>
</tr>
<tr>
<td>John</td>
<td>マーケティング</td>
</tr>
<tr>
<td>Brad</td>
<td>財務</td>
</tr>
<tr>
<td>Tim</td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>オペレーション</td>
</tr>
</table>
</div>
</body>
</html>

出力結果

このコードをブラウザで表示すると、次のようになります。

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

例2：empty-cellsで空セルを非表示にする

次の例では、empty-cells: hide;を指定することで、中身のないセルの罫線や背景を非表示にしています。さらにbox-shadowやborderを組み合わせることで、立体的で装飾性の高いテーブルも作成できます。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    float: left;
    empty-cells: hide;
    box-shadow: inset 0 0 4px orange;
}
tr {
    box-shadow: inset 0 0 10px greenyellow;
}
td {
    font-style: italic;
    box-shadow: inset 0 0 8px red;
}
table, td {
    margin: 6px;
    padding: 6px;
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>サンプルテーブル</caption>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>データ</td>
</tr>
<tr>
<td></td>
<td>データ</td>
<td></td>
</tr>
</table>
</body>
</html>

出力結果

このコードをブラウザで表示すると、次のようになります。

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

まとめ

テーブルの見た目は、border系プロパティとborder-collapseの組み合わせで大きく変わります。空セルの扱いにはempty-cells、列幅の制御や描画速度の最適化にはtable-layoutを活用すると、より読みやすく整った表を作成できます。まずは実際にコードを書きながら、各プロパティの挙動を確認してみてください。

  1. CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

    CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。レスポンシブテーブルのポイントレスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。width: 100%;

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

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