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 »

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 »

Hoverable Table

Move the mouse over the table rows:

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

Example

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 »

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

W3.CSS Cases

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

Flipping the Stripes

Example

Hoverable Table

Example

Table with a Colored Heading

Example

Table Colors

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

NOIDATUT EXAMS

COLOR PICKER

SHARE THIS PAGE

LEARN MORE:

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