W3.CSS Tables

Displaying a Table

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

Basic Table

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

Example

<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

Try It Yourself »

Bordered Table

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

Example

Try It Yourself »

Striped Table

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

Example

Try It Yourself »

Bordered Striped Table

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

Example

Try It Yourself »

Border Around a Striped Table

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

Example

Try It Yourself »

Table All

If you want to use all of the classes above, you can use w3-table-all (combines borders, stripes, padding, etc).

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

Example

Try It Yourself »

Flipping the Stripes

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

To flip the stripes, just add <thead> around the table header:

Example

<thead>
<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
</tr>
</thead>

Try It Yourself »

Table with a Colored Heading

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

Example

<thead>
<tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
</tr>
</thead>

Try It Yourself »

Table Colors

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

Example

Try It Yourself »

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

Example

Try It Yourself »

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

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

Example

Try It Yourself »

Table as a Card

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

Example

Try It Yourself »

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

Try to resize the screen to see the effect.

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000
Eve	Jackson	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400
Adam	Johnson	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700

Example

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>

Try It Yourself »

Tiny Table

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

Example

Try It Yourself »

Small Table

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

Example

Try It Yourself »

Large Table

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

Example

Try It Yourself »

XLarge Table

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

Example

Try It Yourself »

XXLarge Table

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

Example

Try It Yourself »

XXXLarge Table

Name	Points
Smith	50
Jackson	94
Johnson	67
Nilson	35

Example

Try It Yourself »

Jumbo Table

Name	Points
Smith	50
Jackson	94
Johnson	67
Nilson	35

Example

Try It Yourself »

« Previous

Next Chapter »

W3.CSS

Examples

References

W3Data

W3.CSS Tables

Displaying a Table

Basic Table

Example

Bordered Table

Example

Striped Table

Example

Bordered Striped Table

Example

Border Around a Striped Table

Example

Table All

Example

Flipping the Stripes

Example

Table with a Colored Heading

Example

Table Colors

Example

Hoverable Table

Example

Example

Table as a Card

Example

Responsive Table

Example

Tiny Table

Example

Small Table

Example

Large Table

Example

XLarge Table

Example

XXLarge Table

Example

XXXLarge Table

Example

Jumbo Table

Example

W3SCHOOLS EXAMS

COLOR PICKER

LEARN MORE:

SHARE THIS PAGE

Your Suggestion:

Thank You For Helping Us!

Top 10 Tutorials

Top 10 References

Top 10 Examples

Web Certificates

HTML/CSS

JavaScript

HTML Graphics

Server Side

Web Building

XML Tutorials

HTML

CSS

JavaScript

Server Side

XML

Charsets

HTML/CSS

JavaScript

Server Side

XML