W3.CSS テーブル

テーブルの表示

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67
Bo	Nilsson	50
Mike	Ross	35

基本的なテーブル

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

例

<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

Try It Yourself ❯

ボーダー付きテーブル

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

例

Try It Yourself ❯

ストライプ付きテーブル

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

例

Try It Yourself ❯

ボーダー・ストライプ付きテーブル

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

例

Try It Yourself ❯

Border Around a Striped Table

全体にボーダーとストライプ付きテーブル

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

例

Try It Yourself ❯

全クラス付きのテーブル

上記すべてのクラスを使用する場合は、（ボーダー、ストライプ、パディングなどを組み合わせた） w3-table-all を使用することができます。

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

例

Try It Yourself ❯

ストライプの反転

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

ストライプを反転するには、テーブル・ヘッダの周りに <thead> を追加するだけです：

例

<thead>
<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
</tr>
</thead>

Try It Yourself ❯

中央揃え用のテーブル

w3-centered クラスは、テーブル（th と td）内のテキストを中央揃えにします。

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

例

Try It Yourself ❯

色付きヘッダを持つテーブル

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

例

<thead>
<tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
</tr>
</thead>

Try It Yourself ❯

テーブルの色

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

例

Try It Yourself ❯

ホバー効果を持つテーブル

w3-hoverable クラスは、マウスを乗せるとグレーの背景色を追加します：

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

例

Try It Yourself ❯

ホバー色を指定したい場合は、各 <tr> 要素に w3-hover-classes を追加します：

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

例

Try It Yourself ❯

カードのようなテーブル

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

例

Try It Yourself ❯

レスポンシブ・テーブル

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

効果を確認するには、画面のサイズを変更してみてください。

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000
Eve	Jackson	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400
Adam	Johnson	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700

例

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>

Try It Yourself ❯

極小テーブル

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

例

Try It Yourself ❯

小さなテーブル

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

例

Try It Yourself ❯

大きなテーブル

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

例

Try It Yourself ❯

XLarge テーブル

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

例

Try It Yourself ❯

XXLarge テーブル

Name	Points
Jill Smith	50
Eve Jackson	94
Adam Johnson	67
Bo Nilson	35

例

Try It Yourself ❯

XXXLarge テーブル

Name	Points
Smith	50
Jackson	94
Johnson	67
Nilson	35

例

Try It Yourself ❯

Jumbo テーブル

Name	Points
Smith	50
Jackson	94
Johnson	67
Nilson	35

例

Try It Yourself ❯

❮ 前章へ次章へ ❯