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