最新のWeb開発のチュートリアル
 

W3.CSSテーブル

❮前 次の章❯

表の表示

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

基本的な表

ファーストネーム 苗字 点数
ジル スミス 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>
»それを自分で試してみてください

フチ表

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

例

<table class="w3-table w3-border">
»それを自分で試してみてください

ストライプ表

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

例

<table class="w3-table w3-striped">
»それを自分で試してみてください

ボーダーストライプ表

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

例

<table class="w3-table w3-bordered w3-striped">
»それを自分で試してみてください

ストライプテーブルの周りにボーダー

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

例

<table class="w3-table w3-bordered w3-striped w3-border">
»それを自分で試してみてください

ストライプをひっくり返します

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

ストライプを反転するには、単にテーブルのヘッダーの周りに<THEAD>を追加します。

例

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
»それを自分で試してみてください

色付きの見出しで表

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

例

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
»それを自分で試してみてください

表の色

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

例

<table class="w3-table w3-blue">
»それを自分で試してみてください

Hoverable表

W3-hoverableクラスは、マウスオーバーでグレーの背景色を追加します。

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

例

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
»それを自分で試してみてください

あなたが特定のホバー色をしたい場合は、それぞれの<TR>要素にW3-ホバー・クラスのいずれかを追加します。

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

例

<tr class="w3-hover-green">
»それを自分で試してみてください

カードとして表

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

例

<table class="w3-table w3-bordered w3-striped w3-card-4">
»それを自分で試してみてください

レスポンシブ表

画面がいっぱいにコンテンツを表示するには小さすぎる場合は応答テーブルには、水平スクロールバーが表示されます。

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

ファーストネーム 苗字 点数 点数 点数 点数 点数 点数 点数 点数 点数 点数 点数 点数 点数
ジル スミス 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
イブ ジャクソン 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
アダム ジョンソン 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>
»それを自分で試してみてください

タイニー表

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

例

<table class="w3-table w3-bordered w3-striped w3-tiny">
»それを自分で試してみてください

小さなテーブル

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

例

<table class="w3-table w3-bordered w3-striped w3-small">
»それを自分で試してみてください

大きなテーブル

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

例

<table class="w3-table w3-bordered w3-striped w3-large">
»それを自分で試してみてください

XLARGE表

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

例

<table class="w3-table w3-bordered w3-striped w3-xlarge">
»それを自分で試してみてください

XXLarge表

名 点数
ジル・スミス 50
イヴ・ジャクソン 94
アダム・ジョンソン 67
ボーニルソン 35

例

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
»それを自分で試してみてください

XXXLarge表

名 点数
スミス 50
ジャクソン 94
ジョンソン 67
ニルソン 35

例

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
»それを自分で試してみてください

ジャンボ表

名 点数
スミス 50
ジャクソン 94
ジョンソン 67
ニルソン 35

例

<table class="w3-table w3-bordered w3-striped w3-jumbo">
»それを自分で試してみてください

❮前 次の章❯