W3.CSSテーブル

❮ 前次 ❯

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67
ボー	ニルソン	50
マイク	ロス	35

W3.CSSテーブルクラス

W3.CSSは、テーブルに次のクラスを提供します。

クラス	定義
w3-テーブル	HTMLテーブルのコンテナ
w3-ストライプ	縞模様のテーブル
w3-ボーダー	縁取りテーブル
w3-ボーダー	境界線
w3中心	中央のテーブルコンテンツ
w3-ホバリング可能	ホバリング可能なテーブル
w3-テーブル-すべて	すべてのプロパティセット

基本テーブル

w3-tableクラスは、基本的なテーブルを表示するために使用されます。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	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>

縞模様のテーブル

w3-stripedクラスは、テーブルにゼブラストライプを追加するために使用されます。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

ボーダーテーブル

w3-borderedクラスは、各テーブル行に下の境界線を追加します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

縞模様のボーダーテーブル

w3-stripedクラスとw3-borderedクラスを組み合わせて、ストライプボーダーテーブルを作成します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

テーブルの周りの境界線

w3-borderクラスは、テーブルの周囲に境界線を表示するために使用されます。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

ヒント： w3 -borderクラスはテーブル専用ではありません。任意のHTML要素で使用できます！

すべて表示

w3-table-allクラスは、上記のすべてのクラスを組み合わせたものです。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

ストライプを弾く

ストライプを反転するには（明るい灰色で開始）、テーブルヘッダー行の周りに<thead>要素を追加します。また、テーブルヘッダー行に使用する色を定義する必要があります。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67
ボー	ニルソン	35

例

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

すべてのコンテンツを中央に配置

w3中心のクラスは、テーブルのコンテンツを中央に配置します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

1つの列を中央に配置

w3-centerクラスは、列のコンテンツを中央に配置します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>

1つの列を右揃え

w3-right-alignクラスは、列の内容を右揃えにします。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>

ホバー可能なテーブル

w3-hoverableクラスは、マウスオーバー時に灰色の背景色を追加します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

ホバーカラー

特定のホバーカラーが必要な場合は、w3-ホバーカラークラスのいずれかを各<tr>要素に追加します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

W3.CSSクラスの組み合わせ

多くのW3.CSSクラスは、すべてのHTML要素で使用できます。

例：ボーダークラス、カラークラス、フォントクラス、カードクラスなど。

色付きのテーブルヘッダー

w3-カラークラスのいずれかを使用して、色付きの行を表示します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

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

カラーテーブル

w3-カラークラスのいずれかを使用して、色付きのテーブルを表示します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

レスポンシブテーブル

w3レスポンシブクラスは、レスポンシブテーブルを作成します。その後、テーブルは小さな画面で水平方向にスクロールします。大画面で表示する場合、違いはありません。

画面のサイズを変更して、下の表への影響を確認します。

ファーストネーム	苗字	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント	ポイント
ジル	スミス	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000
イブ	ジャクソン	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400
アダム	ジョンソン	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700

例

<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>

カードとしてのテーブル

w3-cardクラスを使用して、テーブルをカードとして表示します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

小さなテーブル

w3-tinyクラスを使用して、小さなテーブルを表示します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

小さいテーブル

w3-smallクラスを使用して、小さなテーブルを表示します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

大きなテーブル

w3-largeクラスを使用して、大きなテーブルを表示します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

XLargeテーブル

w3-xlargeクラスを使用して、xlargeテーブルを表示します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

XXLargeテーブル

w3-xxlargeクラスを使用して、xxlargeテーブルを表示します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

XXXラージテーブル

w3-xxxlargeクラスを使用して、xxxlargeテーブルを表示します。

ファーストネーム	苗字	ポイント
ジル	スミス	50
イブ	ジャクソン	94
アダム	ジョンソン	67

例

ジャンボテーブル

Use the w3-jumbo class to display a jumbo large table:

First Name	Last Name
Jill	Smith
Eve	Jackson
Adam	Johnson

Example

❮ Previous Next ❯

W3.CSS

W3.CSSカラー

Web構築

例

参考文献

W3.CSSテーブル