HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
W3.CSS provides the following classes for tables
W3.CSS provides the following classes for tables:
Class | Defines |
---|---|
w3-table | Container for an HTML table |
w3-striped | Striped table |
w3-border | Bordered table |
w3-bordered | Bordered lines |
w3-centered | Centered table content |
w3-hoverable | Hoverable table |
w3-table-all | All properties set |
The w3-table class is used to display a basic table:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<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>
The w3-striped class is used to add zebra-stripes to a table:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table w3-striped">
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 |
<table class="w3-table w3-bordered">
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 |
<table class="w3-table w3-striped w3-bordered">
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 |
<table class="w3-table w3-striped w3-border">
Tip: The w3-border class is not only for tables. It can be used on any HTML element!
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 |
<table class="w3-table-all">
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:
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
Bo | Nilson | 35 |
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
The w3-centered class centers the content of the table:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all w3-centered">
The w3-center class centers the content of a column:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
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 |
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
The w3-hoverable class adds a grey background color on mouse-over:
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all
w3-hoverable">
If you want a specific hover color, add any of the w3-hover-color classes to each <tr> element:
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<tr class="w3-hover-green">
Many W3.CSS classes can be used on all HTML elements.
For example: border classes, color classes, font classes, card classes, and more.
Use any of the w3-color classes to display a colored row:
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Use any of the w3-color classes to display a colored table:
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table w3-blue">
The w3-responsive class creates a responsive table. The table will then scroll horizontally on small screens. When viewing on large screens, there is no difference.
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 |
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Use a w3-card class to display a table as a card:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all w3-card-4">
Use the w3-tiny class to display a tiny table:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all w3-tiny">
Use the w3-small class to display a small table:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all w3-small">
Use the w3-large class to display a large table:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all w3-large">
Use the w3-xlarge class to display an xlarge table:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all w3-xlarge">
Use the w3-xxlarge class to display an xxlarge table:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all w3-xxlarge">
Use the w3-xxxlarge class to display an xxxlarge table:
First Name | Last Name | Points |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
Adam | Johnson | 67 |
<table class="w3-table-all w3-xxxlarge">
Use the w3-jumbo class to display a jumbo large table:
First Name | Last Name |
---|---|
Jill | Smith |
Eve | Jackson |
Adam | Johnson |
<table class="w3-table-all w3-jumbo">