w3 html table,W3.CSS Tables (表)

W3.CSS 为表提供以下类：

类

定义

w3-table

HTML 表的容器

w3-striped

条纹表

w3-border

边框表

w3-bordered

边框线

w3-centered

居中表格内容

w3-hoverable

悬停表

w3-table-all

所有属性集

基本表

w3-table 类用于显示一个基本表中：

实例

名字	姓氏	年龄
吉尔	史密斯	50

尝试一下 »

点击“尝试一下”按钮查看在线实例

条纹表

w3-striped 类用于将斑马条纹添加到表：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

边框表

w3-bordered 类在每个表行增加了一个底部边框：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

条纹边框表

合并 w3-striped类和 w3-bordered类以创建带条边界表：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

表格周围的边框

w3-border类是用来显示围着表格的边框：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

提示：w3-border类，不仅可应用于表。它可以在任何HTML元素上使用！

显示表格所有属性

w3-table-all类将所有表格属性展示出来：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

翻转条纹

要翻转条纹(从浅灰色开始)，请在表标题行周围添加元素。您还必须定义用于表标题行的颜色：

实例

名字姓氏年龄

尝试一下 »

点击“尝试一下”按钮查看在线实例

表格内容居中

w3-centered类将表的内容居中：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

将一列居中

w3-center类可以将指定的一列的内容居中：

实例

名字	姓氏	年龄

尝试一下 »

点击“尝试一下”按钮查看在线实例

右对齐一列

w3-right-align 类可以将指定的一列内容右对齐：

实例

名字	姓氏	年龄

尝试一下 »

点击“尝试一下”按钮查看在线实例

悬停表

w3-hoverable类添加鼠标悬停时在表格上显示灰色的背景色：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

悬停颜色

如果要使用特定的悬停颜色，请将 w3-hover-color类添加到每个

元素：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

组合使用W3.CSS类

许多W3.CSS类都可以在所有HTML元素上使用。

例如：边框类别，颜色类别，字体类别，卡片类别等等。

彩色表标题

使用 w3-color 类来显示彩色行：

实例

名字姓氏年龄

尝试一下 »

点击“尝试一下”按钮查看在线实例

彩色表

使用 w3-color类来显示彩色表：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

响应表

在 w3-responsive 类创建一个响应表。然后，表格将在小屏幕上水平滚动。在大屏幕上观看时，没有区别。

调整屏幕大小以查看下表中的效果：

实例

... 表内容 ...

尝试一下 »

点击“尝试一下”按钮查看在线实例

卡片化表格

使用 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 表格：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例