免費AI編程助手
W3.CSS Tables (表)
W3.CSS 為表提供以下類：
| 類 | 定義 |
|---|---|
| w3-table
|
HTML 表的容器 |
| w3-striped | 條紋表 |
| w3-border | 邊框表 |
| w3-bordered |
邊框線 |
| w3-centered |
居中表格內(nèi)容 |
| w3-hoverable |
懸停表 |
| w3-table-all | 所有屬性集 |
基本表
w3-table 類用于顯示一個基本表中：
實例
<table class="w3-table">
<tr>
<th>名字</th>
<th>姓氏</th>
<th>年齡</th>
</tr>
<tr>
<td>吉爾</td>
<td>史密斯</td>
<td>50</td>
</tr>
</table>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
條紋表
w3-striped 類用于將斑馬條紋添加到表：
邊框表
w3-bordered 類在每個表行增加了一個底部邊框：
條紋邊框表
合并 w3-striped 類和 w3-bordered 類以創(chuàng)建帶條邊界表：
表格周圍的邊框
w3-border 類是用來顯示圍著表格的邊框：
提示： w3-border 類，不僅可應用于表。它可以在任何HTML元素上使用！
顯示表格所有屬性
w3-table-all 類將所有表格屬性展示出來：
翻轉(zhuǎn)條紋
要翻轉(zhuǎn)條紋（從淺灰色開始），請在表標題行周圍添加<thead>元素。您還必須定義用于表標題行的顏色：
實例
<thead>
<tr class="w3-light-grey">
<th>名字</th>
<th>姓氏</th>
<th>年齡</th>
</tr>
</thead>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
表格內(nèi)容居中
w3-centered 類將表的內(nèi)容居中：
將一列居中
w3-center 類可以將指定的一列的內(nèi)容居中：
實例
<table class="w3-table-all">
<tr>
<th>名字</th>
<th>姓氏</th>
<th class="w3-center">年齡</th>
</tr>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
右對齊一列
w3-right-align 類可以將指定的一列內(nèi)容右對齊：
實例
<table class="w3-table-all">
<tr>
<th>名字</th>
<th>姓氏</th>
<th class="w3-right-align">年齡</th>
</tr>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
懸停表
w3-hoverable 類添加鼠標懸停時在表格上顯示灰色的背景色：
懸停顏色
如果要使用特定的懸停顏色，請將 w3-hover-color 類添加到每個<tr>元素：
組合使用W3.CSS類
許多W3.CSS類都可以在所有HTML元素上使用。
例如：邊框類別，顏色類別，字體類別，卡片類別等等。
彩色表標題
使用 w3-color 類來顯示彩色行：
彩色表
使用 w3-color 類來顯示彩色表：
響應表
在 w3-responsive 類創(chuàng)建一個響應表。然后，表格將在小屏幕上水平滾動。在大屏幕上觀看時，沒有區(qū)別。
調(diào)整屏幕大小以查看下表中的效果：
實例
<div class="w3-responsive">
<table class="w3-table-all">
... 表內(nèi)容 ...
</table>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
卡片化表格
使用 w3-card 類將表格卡片化：
Tiny 表格
使用 w3-tiny 類制作Tiny 表格：
Small 表格
使用 w3-small 類制作 Small 表格：
Large 表格
使用 w3-large 類制作 Large 表格：
XLarge 表格
使用 w3-xlarge 類制作 XLarge 表格：
XXLarge 表格
使用 w3-xxlarge 類制作 XXLarge 表格：
XXXLarge 表格
使用 w3-xxxlarge 類顯示 XXLarge 表格：
Jumbo 表格
使用 w3-jumbo 類制作 Jumbo 表格：
更多建議：