W3.CSS Tables

---

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67
Bo	Nilsson	50
Mike	Ross	35

---

W3.CSS Table Classes

W3.CSS provides the following classes for tables:

Class	Defines
w3-table	Container for an HTML table
w3-striped	Striped table
w3-border	Bordered table
w3-bordered	Bordered lines
w3-centered	Centered table content
w3-hoverable	Hoverable table
w3-table-all	All properties set

---

Basic Table

The w3-table class is used to display a basic table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

---

Striped Table

The w3-striped class is used to add zebra-stripes to a table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Bordered Table

The w3-bordered class adds a bottom border to each table row:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Striped Bordered Table

Combine the w3-striped class and the w3-bordered class to create a striped bordered table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Border Around a Table

The w3-border class is used to display a border around a table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Displaying it All

The w3-table-all class combines all of the classes above:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Flipping the Stripes

To flip the stripes (start with the light-grey color), add a <thead> element around the table header row. You must also define a color to be used for the table header row:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67
Bo	Nilson	35

---

Centering all Content

The w3-centered class centers the content of the table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Centering one Column

The w3-center class centers the content of a column:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Right Align one Column

The w3-right-align class right aligns the content of a column:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Hoverable Table

The w3-hoverable class adds a grey background color on mouse-over:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Hover Colors

If you want a specific hover color, add any of the w3-hover-color classes to each <tr> element:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Combining W3.CSS Classes

Many W3.CSS classes can be used on all HTML elements.

For example: border classes, color classes, font classes, card classes, and more.

---

 Colored Table Header

Use any of the w3-color classes to display a colored row:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Colored Table

Use any of the w3-color classes to display a colored table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Responsive Table

The w3-responsive class creates a responsive table. The table will then scroll horizontally on small screens. When viewing on large screens, there is no difference.

Resize the screen to see the effect on the table below:

---

Table as a Card

Use a w3-card class to display a table as a card:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Tiny Table

Use the w3-tiny class to display a tiny table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Small Table

Use the w3-small class to display a small table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Large Table

Use the w3-large class to display a large table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

XLarge Table

Use the w3-xlarge class to display an xlarge table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

XXLarge Table

Use the w3-xxlarge class to display an xxlarge table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

XXXLarge Table

Use the w3-xxxlarge class to display an xxxlarge table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

---

Jumbo Table

Use the w3-jumbo class to display a jumbo large table:

First Name	Last Name
Jill	Smith
Eve	Jackson
Adam	Johnson