免费AI编程助手
W3.CSS Tables (表)
W3.CSS 为表提供以下类：
| 类 | 定义 |
|---|---|
| w3-table
|
HTML 表的容器 |
| w3-striped | 条纹表 |
| w3-border | 边框表 |
| w3-bordered |
边框线 |
| w3-centered |
居中表格内容 |
| 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 类以创建带条边界表：
表格周围的边框
w3-border 类是用来显示围着表格的边框：
提示： w3-border 类，不仅可应用于表。它可以在任何HTML元素上使用！
显示表格所有属性
w3-table-all 类将所有表格属性展示出来：
翻转条纹
要翻转条纹（从浅灰色开始），请在表标题行周围添加<thead>元素。您还必须定义用于表标题行的颜色：
实例
<thead>
<tr class="w3-light-grey">
<th>名字</th>
<th>姓氏</th>
<th>年龄</th>
</tr>
</thead>
尝试一下 »
点击“尝试一下”按钮查看在线实例
表格内容居中
w3-centered 类将表的内容居中：
将一列居中
w3-center 类可以将指定的一列的内容居中：
实例
<table class="w3-table-all">
<tr>
<th>名字</th>
<th>姓氏</th>
<th class="w3-center">年龄</th>
</tr>
尝试一下 »
点击“尝试一下”按钮查看在线实例
右对齐一列
w3-right-align 类可以将指定的一列内容右对齐：
实例
<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 类创建一个响应表。然后，表格将在小屏幕上水平滚动。在大屏幕上观看时，没有区别。
调整屏幕大小以查看下表中的效果：
实例
<div class="w3-responsive">
<table class="w3-table-all">
... 表内容 ...
</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 表格：
更多建议：