THE WORLD'S LARGEST WEB DEVELOPER SITE
☰ HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
TUTORIALS REFERENCES EXAMPLES
 

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

<table class="w3-table w3-border">
Try It Yourself »

Striped Table

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

Example

<table class="w3-table w3-striped">
Try It Yourself »

Bordered Striped Table

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

Example

<table class="w3-table w3-bordered w3-striped">
Try It Yourself »

Border Around a Striped Table

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

Example

<table class="w3-table w3-bordered w3-striped w3-border">
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

<table class="w3-table w3-blue">
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

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
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

<tr class="w3-hover-green">
Try It Yourself »

Table as a Card

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

Example

<table class="w3-table w3-bordered w3-striped w3-card-4">
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

<table class="w3-table w3-bordered w3-striped w3-tiny">
Try It Yourself »

Small Table

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

Example

<table class="w3-table w3-bordered w3-striped w3-small">
Try It Yourself »

Large Table

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

Example

<table class="w3-table w3-bordered w3-striped w3-large">
Try It Yourself »

XLarge Table

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

Example

<table class="w3-table w3-bordered w3-striped w3-xlarge">
Try It Yourself »

XXLarge Table

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

Example

<table class="w3-table w3-bordered w3-striped w3-xxlarge">
Try It Yourself »

XXXLarge Table

Name Points
Smith 50
Jackson 94
Johnson 67
Nilson 35

Example

<table class="w3-table w3-bordered w3-striped w3-xxxlarge">
Try It Yourself »

Jumbo Table

Name Points
Smith 50
Jackson 94
Johnson 67
Nilson 35

Example

<table class="w3-table w3-bordered w3-striped w3-jumbo">
Try It Yourself »

PRINT PAGE
ABOUT

Top 10 Tutorials

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
SQL Tutorial
PHP Tutorial
jQuery Tutorial
Angular Tutorial
XML Tutorial

Top 10 References

HTML Reference
CSS Reference
JavaScript Reference
W3.CSS Reference
Browser Statistics
PHP Reference
HTML Colors
HTML Character Sets
jQuery Reference
AngularJS Reference

Top 10 Examples

HTML Examples
CSS Examples
JavaScript Examples
W3.CSS Examples
HTML DOM Examples
PHP Examples
jQuery Examples
ASP Examples
XML Examples
SVG Examples

Web Certificates

HTML Certificate
HTML5 Certificate
CSS Certificate
JavaScript Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2016 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

W3Schools.com