最新的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">
試一試»

如果你想要一個特定的懸停顏色，添加任何的W3-懸停類每個<TR>元素：

名字 姓 點
吉爾 工匠 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">
試一試»

❮上一頁 下一頁章❯