W3.CSS Tables (表)

2020-11-30 15:49 更新

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 类用于将斑马条纹添加到表:

实例

<table class="w3-table w3-striped">


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

边框表

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

实例

<table class="w3-table w3-bordered">


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

条纹边框表

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

实例

<table class="w3-table w3-striped w3-bordered">


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

表格周围的边框

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

实例

<table class="w3-table w3-striped w3-border">


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

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


显示表格所有属性

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

实例

<table class="w3-table-all">


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

翻转条纹

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

实例

<thead>

  <tr class="w3-light-grey">

    <th>名字</th>

    <th>姓氏</th>

    <th>年龄</th>

  </tr>

</thead>


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

表格内容居中

w3-centered 类将表的内容居中

实例

<table class="w3-table-all 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 类添加鼠标悬停时在表格上显示灰色的背景色:

实例

<table class="w3-table-all w3-hoverable">


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

悬停颜色

如果要使用特定的悬停颜色,请将 w3-hover-color 类添加到每个<tr>元素:

实例

<tr class="w3-hover-green">


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

组合使用W3.CSS类

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

例如:边框类别,颜色类别,字体类别,卡片类别等等。


彩色表标题

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

实例

<tr class="w3-red">

  <th>名字</th>

  <th>姓氏</th>

  <th>年龄</th>

</tr>


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

彩色表

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

实例

<table class="w3-table w3-blue">


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

响应表

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

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

实例

<div class="w3-responsive">

  <table class="w3-table-all">

    ... 表内容 ...

  </table>

</div>


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

卡片化表格

使用 w3-card 类将表格卡片化:

实例

<table class="w3-table-all w3-card-4">


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

Tiny 表格

使用 w3-tiny 类制作Tiny 表格:

实例

<table class="w3-table-all w3-tiny">


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

Small 表格

使用 w3-small 类制作 Small 表格:

实例

<table class="w3-table-all w3-small">


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

Large 表格

使用 w3-large 类制作 Large 表格:

实例

<table class="w3-table-all w3-large">


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

XLarge 表格

使用 w3-xlarge 类制作 XLarge 表格:

实例

<table class="w3-table-all w3-xlarge">


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

XXLarge 表格

使用 w3-xxlarge 类制作 XXLarge 表格:

实例

<table class="w3-table-all w3-xxlarge">

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

XXXLarge 表格

使用 w3-xxxlarge 类显示 XXLarge 表格:

实例

<table class="w3-table-all w3-xxxlarge">


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

Jumbo 表格

使用 w3-jumbo 类制作 Jumbo 表格:

实例

<table class="w3-table-all w3-jumbo">


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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号