W3.CSS Tables
Tables
W3.CSS provides classes for creating clean and responsive HTML tables.
Tables can have stripes, borders, colors, hover effects, and more.
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilsson | 50 |
| Mike | Ross | 35 |
Table Classes
| Class | Description |
|---|---|
w3-table |
Basic table |
w3-striped |
Adds stripes to the table rows |
w3-bordered |
Adds borders between table rows |
w3-border |
Adds a border around the table |
w3-table-all |
All classes above set |
w3-hoverable |
Adds a hover effect to table rows |
w3-centered |
Centers table content |
w3-responsive |
Makes wide tables scroll on small screens |
Basic Table
Use the w3-table class to create a basic table.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | 999ドル |
| Phone | Mobile | 699ドル |
| Tablet | Mobile | 499ドル |
| Monitor | Computers | 299ドル |
Example
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Computers</td>
<td>999ドル</td>
</tr>
<tr>
<td>Phone</td>
<td>Mobile</td>
<td>699ドル</td>
</tr>
<tr>
<td>Tablet</td>
<td>Mobile</td>
<td>499ドル</td>
</tr>
<tr>
<td>Monitor</td>
<td>Computers</td>
<td>299ドル</td>
</tr>
</table>
Striped Tables
Add w3-striped to make alternate rows different colors.
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Table Borders
The w3-bordered class adds a bottom border to each table row:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Colored Table Headers
Use any W3.CSS color class on a table row to create a colored header.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | 999ドル |
| Phone | Mobile | 699ドル |
| Tablet | Mobile | 499ドル |
| Monitor | Computers | 299ドル |
Example
<tr class="w3-blue">
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
...
</table>
w3-bordered adds borders between rows.
w3-border adds a border around the table.
Striped Bordered Table
Combine the w3-striped class and the w3-bordered class to create a striped bordered table:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Border Around a Table
The w3-border class is used to display a border around a table:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Note
The w3-border class is not only for tables. It can be used on any HTML element!
Combine Table Classes
Table classes can be combined to create the style you want.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | 999ドル |
| Phone | Mobile | 699ドル |
| Tablet | Mobile | 499ドル |
| Monitor | Computers | 299ドル |
Combining All
The w3-table-all class combines all of the classes above:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Flipping the Stripes
To flip the stripes (start with the light-grey color), add a <thead> element around the table header row. You must also define a color to be used for the table header row:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Bo | Nilson | 35 |
Example
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Hoverable Tables
The w3-hoverable class highlights a row when the mouse moves over it.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | 999ドル |
| Phone | Mobile | 699ドル |
| Tablet | Mobile | 499ドル |
| Monitor | Computers | 299ドル |
Responsive Tables
Wide tables can be difficult to view on small screens.
Place the table inside a w3-responsive container to allow horizontal scrolling when needed.
Resize the screen to see the effect on the table below:
| First Name | Last Name | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points | Points |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Jill | Smith | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| Eve | Jackson | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Adam | Johnson | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Example
<table class="w3-table-all">
...
</table>
</div>
A responsive table stays unchanged when there is enough space.
On smaller screens, the table can scroll horizontally instead of overflowing the page.
Table as a Card
Add a card class to make the table stand out from the page.
| Product | Category | Price |
|---|---|---|
| Laptop | Computers | 999ドル |
| Phone | Mobile | 699ドル |
| Tablet | Mobile | 499ドル |
| Monitor | Computers | 299ドル |
Different Table Sizes
Font-size classes can also be used on tables.
| Class | Size |
|---|---|
w3-tiny |
Tiny |
w3-small |
Small |
w3-large |
Large |
w3-xlarge |
Extra large |
w3-xxlarge |
Extra extra large |
w3-xxxlarge |
Extra extra extra large |
w3-jumbo |
Jumbo |
Examples
What You Have Learned
w3-tablecreates a basic styled tablew3-stripedadds alternating row colorsw3-borderedadds borders between rowsw3-borderadds a border around a tablew3-hoverableadds a row hover effect- Color classes can be used on table rows
w3-responsivehelps wide tables fit small screens
More Examples
Explore more ways to style W3.CSS tables.
Colored Table
Use any of the w3-color classes to display a colored table:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Right Align one Table Column
The w3-right-align class right aligns the content of a
column:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Example
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Centering one Column
The w3-center class centers the content of a column:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Example
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Centering Table Content
The w3-centered class centers the content of the table:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
Custom Hover Colors
If you want a specific hover color, add any of the w3-hover-color classes
to each <tr> element:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Product | Price |
|---|---|
| Laptop | 999ドル |
| Phone | 699ドル |
| Tablet | 499ドル |