THE INDIA LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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 »

Hoverable Table

Move the mouse over the table rows:

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 »

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 »

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 »