Latest web development tutorials
 

W3.CSS Tables

❮ Previous Next Chapter ❯

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 »

❮ Previous Next Chapter ❯