CSS テーブル

HTML テーブルの外観は、CSSによって大きく改善することができます：

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

テーブルボーダー

CSS で、テーブルボーダーを指定するためには、border プロパティを使用します。

下の例は、<table>、<th>、<td> 要素へ黒色のボーダーを指定しています：

例

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

Try it Yourself ❯

上記例のテーブルには、2重線でボーダーが描かれていることに注意してください。これは、table と <th>・<td> 要素に対して別々にボーダーが描かれるためです。

ボーダーの重ね合わせ

border-collapse プロパティは、テーブルのボーダーを重ねて単線にするかどうかを設定します：

例

table {
border-collapse: collapse;
}

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

Try it Yourself ❯

テーブルの周りにだけボーダーが必要なら、<table> にのみ border を指定します：

例

table {
border: 1px solid black;
}

Try it Yourself ❯

テーブルの幅と高さ

テーブルの幅と高さは、width と height プロパティで定義します：

下の例は、テーブルの幅を 100% に、<th> 要素の高さを 50px に設定しています:

例

table {
width: 100%;
}

th {
height: 50px;
}

Try it Yourself ❯

横位置揃え

text-align プロパティは、<th> または <td> のコンテンツを左揃え、右揃えまたは中央揃えのように、横位置の揃えかたを設定します。

デフォルトでは、<th> 要素のテキストは中央揃えで、<td> 要素のテキストは左揃えです。

次の例は、<th> 要素のテキストを左揃えにします：

例

th {
text-align: left;
}

Try it Yourself ❯

縦位置揃え

vertical-align プロパティは、<th> または <td> におけるコンテンツの縦位置（上、下または中央）を設定します。

デフォルトでは、テーブルにおけるテキストの縦位置は中央揃えです（<th>、<td> 要素の双方ともに）

次の例は、<td> 要素のテキストの縦位置揃えを下端揃えにします：

例

td {
height: 50px;
vertical-align: bottom;
}

Try it Yourself ❯

テーブル・パディング

テーブルのボーダーとコンテンツの間のスペースをコントロールするには、 <td> と <th> 要素に padding プロパティを使用します:

例

th, td {
padding: 15px;
text-align: left;
}

Try it Yourself ❯

横罫線

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

横罫線は、<th> と <td> に border-bottom プロパティを追加します：

例

th, td {
border-bottom: 1px solid #ddd;
}

Try it Yourself ❯

ホバー付きテーブル

マウスオーバーでテーブルの行をハイライト表示するには、<tr> に :hover セレクタを使用します：

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

例

tr:hover {background-color: #f5f5f5}

Try it Yourself ❯

ストライプ付きテーブル

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

縞馬模様のテーブルには、nth-child() セレクタを使用して、偶数（または奇数）行のすべてに背景色を追加します：

例

tr:nth-child(even) {background-color: #f2f2f2}

Try it Yourself ❯

テーブルの色

下の例は、<th> 要素の背景色とテキストの色を指定しています：

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

例

th {
background-color: #4CAF50;
color: white;
}

Try it Yourself ❯

レスポンシブなテーブル

レスポンシブ・テーブルは、コンテンツ全体を表示するには画面が小さすぎる場合には、横方向のスクロールバーを表示します：

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	50	50	50	50	50	50	50	50	50	50	50	50
Eve	Jackson	94	94	94	94	94	94	94	94	94	94	94	94
Adam	Johnson	67	67	67	67	67	67	67	67	67	67	67	67

レスポンシブにするには、<table> の周りを overflow-x:auto を持つコンテナ要素（例えば <div>）で囲みます：

例

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

Try it Yourself ❯

その他の例

>装飾的なテーブルの作成
この例は、装飾的なテーブルの作成方法のデモです。

テーブル表題の位置設定
この例は、テーブル表題の位置の設定方法のデモです。

練習問題で確認テスト！

Exercise 1 ❯ Exercise 2 ❯ Exercise 3 ❯ Exercise 4 ❯ Exercise 5 ❯ Exercise 6 ❯

CSS テーブル・プロパティ

プロパティ	説明
border	1 回の宣言でボーダーの全プロパティを設定する
border-collapse	テーブルのボーダーを重ね合わせるかどうかを指定する
border-spacing	隣接するセルのボーダーとの間の距離を指定する
caption-side	テーブル表題の配置を指定する
empty-cells	テーブルに空セルにボーダーや背景を表示するかどうかを指定する
table-layout	テーブルに使用するレイアウト・アルゴリズムを設定する

❮ 前章へ次章へ ❯