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

HTMLテーブルを美しく整える！覚えておきたいCSSプロパティ徹底解説

CSSを使えば、HTMLの<table>要素やその内部要素に対して自由にスタイルを定義できます。テーブルはデータを見やすく整理するための重要な要素ですが、デフォルトのままでは味気なく表示されがちです。そこで活躍するのが、テーブル専用のCSSプロパティです。

ここでは、テーブルのスタイリングで特によく使われる以下のプロパティについて詳しく解説します。

  • border — テーブルやセルの枠線を定義するプロパティです。border-width（太さ）、border-style（種類）、border-color（色）を一括して指定できます。
  • border-collapse — 隣接するセル同士の罫線を共有するか（collapse）、それぞれ独立させるか（separate）を指定します。テーブル全体の見た目を大きく左右する重要なプロパティです。
  • caption-side — <caption>要素で追加したキャプション（表題）ボックスを、テーブルの上側か下側のどちらに配置するかを指定します。
  • empty-cells — 内容を持たない空のセルの罫線や背景を表示するかどうかを指定します。show（表示）またはhide（非表示）の値を取ります。
  • table-layout — ブラウザがテーブルの行・列・セルをどのようなアルゴリズムでレイアウトするかを定義します。auto（内容に応じて自動調整）とfixed（最初の行を基準に固定）を選択でき、fixedを指定すると描画速度が向上します。

サンプルコード①：基本のテーブルスタイリング

次の例では、テーブル全体に斜体フォントとパディングを適用し、キャプションを下側に配置し、さらに<td>要素に内側の影（box-shadow）を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
    border: thin solid;
    padding: 5px;
    font-style: italic;
}
caption {
    caption-side: bottom;
}
td {
    box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

出力結果

このコードを実行すると、すべてのセルに緑色の内側の影が付いた斜体のテーブルが表示され、「Demo caption」というキャプションがテーブルの下部に配置されます。また、空のセルにも同じスタイルが適用されていることが確認できます。

サンプルコード②：border-collapseによる見た目の違い

次の例では、2つのテーブルを並べて表示し、border-collapseプロパティの有無による違いを比較しています。1つ目のテーブル（t1）はデフォルトの「separate」（罫線が分離）状態、2つ目のテーブル（t2）は「collapse」（罫線を結合）を指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    display: flex;
    float: left;
}
table {
    border: 3px solid black;
}
td {
    border: 3px solid lightgreen;
}
th {
    border: 3px solid lightblue;
}
#t2 {
    border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Team Rankings</h2>
<div>
<table id="t1">
<tr>
<th>Team (Test)</th>
<th>Rank</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>
</div>
<div>
<table id="t2">
<tr>
<th>Team (ODI)</th>
<th>Rank</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>

出力結果

このコードを実行すると、左側のテーブルは各セルの罫線が二重に表示されるのに対し、右側のテーブルは隣接する罫線が1本にまとまってスッキリとした印象になります。このようにborder-collapse: collapse;を指定することで、より洗練されたテーブルデザインを実現できます。

まとめ

テーブルのスタイリングには、borderで枠線を定義し、border-collapseで罫線の結合・分離を制御するのが基本です。さらにcaption-sideでキャプション位置を調整したり、empty-cellsで空セルの表示を制御したり、table-layoutでレイアウトアルゴリズムを最適化したりすることで、読みやすく美しいテーブルを作成できます。これらのプロパティを組み合わせて、目的に合ったテーブルデザインをぜひ試してみてください。

  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の新機能：text-decorationプロパティでテキスト装飾と下線を自由にデザインする方法

    text-decoration関連の各プロパティが登場したことで、これまで以上に柔軟にテキストの装飾や下線をコントロールできるようになりました。 text-decorationは、text-decoration-thickness（線の太さ）、text-decoration-color（線の色）、text-decoration-line（線の種類）、text-decoration-style（線のスタイル）をまとめて指定できるショートハンド（一括指定）プロパティです。一方、text-decoration-skip、text-decoration-skip-ink、text-underline-