W3.CSS 表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilsson | 50 |
| 邁克 | Ross | 35 |
W3.CSS 表格類
W3.CSS 提供了以下用於表格的類
| 類 | 定義 |
|---|---|
| w3-table | HTML 表格的容器 |
| w3-striped | 斑馬條紋表格 |
| w3-border | 帶邊框的表格 |
| w3-bordered | 帶邊框的線條 |
| w3-centered | 居中文字內容 |
| w3-hoverable | 滑鼠懸停表格 |
| w3-table-all | 所有屬性設定 |
基礎表格
w3-table 類用於顯示一個基礎表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
示例
<table class="w3-table">
<tr>
<th>名字</th>
<th>姓氏</th>
<th>分數</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
自己試試 »
斑馬條紋表格
w3-striped 類用於為表格新增斑馬條紋
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
帶邊框的表格
w3-bordered 類會在每個表格行下方新增一個邊框
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
斑馬條紋帶邊框的表格
結合使用 w3-striped 類和 w3-bordered 類，可以建立斑馬條紋帶邊框的表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
表格周圍的邊框
w3-border 類用於在表格周圍顯示邊框
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
提示： w3-border 類不僅僅用於表格。它可以用於任何 HTML 元素！
全部顯示
w3-table-all 類結合了以上所有類
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
翻轉條紋
要翻轉條紋（從淺灰色開始），請在表格標題行周圍新增 <thead> 元素。您還必須定義用於表格標題行的顏色
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 35 |
示例
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>分數</th>
</tr>
</thead>
自己試試 »
居中所有內容
w3-centered 類用於居中文字內容
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
居中某一列
w3-center 類用於居中文字內容
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
示例
<table class="w3-table-all">
<tr>
<th>名字</th>
<th>姓氏</th>
<th class="w3-center">分數</th>
</tr>
自己試試 »
右對齊某一列
w3-right-align 類用於右對齊文字內容
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
示例
<table class="w3-table-all">
<tr>
<th>名字</th>
<th>姓氏</th>
<th class="w3-right-align">分數</th>
</tr>
自己試試 »
滑鼠懸停表格
w3-hoverable 類在滑鼠懸停時新增灰色背景色
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
懸停顏色
如果您想要特定的懸停顏色，請為每個 <tr> 元素新增 w3-hover-顏色 類
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
組合使用 W3.CSS 類
許多 W3.CSS 類可以用於所有 HTML 元素。
例如：邊框類、顏色類、字型類、卡片類等等。
有顏色的表頭
使用任何 w3-顏色 類來顯示有顏色的行
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
有顏色的表格
使用任何 w3-顏色 類來顯示有顏色的表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
響應式表格
w3-responsive 類建立響應式表格。表格將在小螢幕上水平滾動。在大螢幕上檢視時，沒有區別。
調整螢幕大小以檢視下方表格的效果
| 名字 | 姓氏 | 分數 | 分數 | 分數 | 分數 | 分數 | 分數 | 分數 | 分數 | 分數 | 分數 | 分數 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Eve | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
卡片式表格
使用 w3-card 類將表格顯示為卡片
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
迷你表格
使用 w3-tiny 類顯示一個迷你表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
小型表格
使用 w3-small 類顯示一個小型表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
大型表格
使用 w3-large 類顯示一個大型表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
特大表格
使用 w3-xlarge 類顯示一個特大表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
超大表格
使用 w3-xxlarge 類顯示一個超大表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
巨型表格
使用 w3-xxxlarge 類顯示一個巨型表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
特大號表格
使用 w3-jumbo 類顯示一個特大號表格
| 名字 | 姓氏 |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
