Materialize CSS Tables
Materialize CSS tables provide predefined classes such as .striped, .highlight, .centered, .responsive-table that are used to display different styles of table.
Types Of Table Styles
- Borderless Table
- Bordered Table
- Striped Table
- Highlight Table
- Centered Table
- Responsive Table
Borderless Table
It is a basic table without borders. To create a borderless table, you do not need to add any predefined table class.
Source Code
<table class="responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>7894xxxx45</td>
<td>johnsmith@gmail.com</td>
</tr>
<tr>
<td>Jane</td>
<td>78xx56xx78</td>
<td>jane@gmail.com</td>
</tr>
</tbody>
</table>
Source Code: Output
| Name | Mobile | Email ID |
|---|---|---|
| John Smith | 7894xxxx45 | johnsmith@gmail.com |
| Jane | 78xx56xx78 | jane@gmail.com |
Bordered Table
To create bordered table, add .bordered class to the table element base class.
Source Code
<table class="bordered responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>7894xxxx45</td>
<td>johnsmith@gmail.com</td>
</tr>
<tr>
<td>Jane</td>
<td>78xx56xx78</td>
<td>jane@gmail.com</td>
</tr>
</tbody>
</table>
Source Code: Output
| Name | Mobile | Email ID |
|---|---|---|
| John Smith | 7894xxxx45 | johnsmith@gmail.com |
| Jane | 78xx56xx78 | jane@gmail.com |
Striped Table
To create materialize CSS striped table, assign .striped class to the table base class.
Source Code
<table class="striped responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>7894xxxx45</td>
<td>johnsmith@gmail.com</td>
</tr>
<tr>
<td>Jane</td>
<td>78xx56xx78</td>
<td>jane@gmail.com</td>
</tr>
</tbody>
</table>
Source Code: Output
| Name | Mobile | Email ID |
|---|---|---|
| John Smith | 7894xxxx45 | johnsmith@gmail.com |
| Jane | 78xx56xx78 | jane@gmail.com |
Materialize CSS Highlight Table
To create materialize CSS highlight table assign .highlight to the table element base class.
Source Code
<table class="highlight responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>7894xxxx45</td>
<td>johnsmith@gmail.com</td>
</tr>
<tr>
<td>Jane</td>
<td>78xx56xx78</td>
<td>jane@gmail.com</td>
</tr>
</tbody>
</table>
Source Code: Output
| Name | Mobile | Email ID |
|---|---|---|
| John Smith | 7894xxxx45 | johnsmith@gmail.com |
| Jane | 78xx56xx78 | jane@gmail.com |
Materialize CSS Centered Table
To create materialized CSS centered table, assign .centered class to the table element base class.
Source Code
<table class="centered responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>7894xxxx45</td>
<td>johnsmith@gmail.com</td>
</tr>
<tr>
<td>Jane</td>
<td>78xx56xx78</td>
<td>jane@gmail.com</td>
</tr>
</tbody>
</table>
Source Code: Output
| Name | Mobile | Email ID |
|---|---|---|
| John Smith | 7894xxxx45 | johnsmith@gmail.com |
| Jane | 78xx56xx78 | jane@gmail.com |
Materialize CSS Responsive Table
To create materialize CSS responsive table, assign .responsive-table to the table element base class.
Source Code
<table class="responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Email ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>7894xxxx45</td>
<td>johnsmith@gmail.com</td>
</tr>
<tr>
<td>Jane</td>
<td>78xx56xx78</td>
<td>jane@gmail.com</td>
</tr>
</tbody>
</table>
Source Code: Output
| Name | Mobile | Email ID |
|---|---|---|
| John Smith | 7894xxxx45 | johnsmith@gmail.com |
| Jane | 78xx56xx78 | jane@gmail.com |
Web Tutorials
