W3.CSS 表格

---

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67
Bo	Nilsson	50
迈克	Ross	35

---

W3.CSS 表格类

W3.CSS 提供了以下用于表格的类

类	定义
w3-table	HTML 表格的容器
w3-striped	斑马条纹表格
w3-border	带边框的表格
w3-bordered	带边框的线条
w3-centered	居中文本内容
w3-hoverable	鼠标悬停表格
w3-table-all	所有属性设置

---

基础表格

w3-table 类用于显示一个基础表格

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

---

斑马条纹表格

w3-striped 类用于为表格添加斑马条纹

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

带边框的表格

w3-bordered 类会在每个表格行下方添加一个边框

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

斑马条纹带边框的表格

结合使用 w3-striped 类和 w3-bordered 类，可以创建斑马条纹带边框的表格

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

表格周围的边框

w3-border 类用于在表格周围显示边框

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

全部显示

w3-table-all 类结合了以上所有类

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

翻转条纹

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

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67
Bo	Nilson	35

---

居中所有内容

w3-centered 类用于居中文本内容

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

居中某一列

w3-center 类用于居中文本内容

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

右对齐某一列

w3-right-align 类用于右对齐文本内容

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

鼠标悬停表格

w3-hoverable 类在鼠标悬停时添加灰色背景色

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

悬停颜色

如果您想要特定的悬停颜色，请为每个 <tr> 元素添加 w3-hover-颜色 类

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

组合使用 W3.CSS 类

许多 W3.CSS 类可以用于所有 HTML 元素。

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

---

 有颜色的表头

使用任何 w3-颜色 类来显示有颜色的行

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

有颜色的表格

使用任何 w3-颜色 类来显示有颜色的表格

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

响应式表格

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

调整屏幕大小以查看下方表格的效果

---

卡片式表格

使用 w3-card 类将表格显示为卡片

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

迷你表格

使用 w3-tiny 类显示一个迷你表格

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

小型表格

使用 w3-small 类显示一个小型表格

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

大型表格

使用 w3-large 类显示一个大型表格

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

特大表格

使用 w3-xlarge 类显示一个特大表格

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

超大表格

使用 w3-xxlarge 类显示一个超大表格

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

巨型表格

使用 w3-xxxlarge 类显示一个巨型表格

名字	姓氏	分数
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

特大号表格

使用 w3-jumbo 类显示一个特大号表格

名字	姓氏
Jill	Smith
Eve	Jackson
Adam	Johnson