Materialize Table
Material CSS table's classes are used to create different nice looking table layouts such as simple table, stripped table, centered table and responsive table. You can make the Materialize table responsive easily.
Materialize CSS provides following types of tables.
- Borderless Table
- Bordered Table
- Striped Table
- Highlight Table
- Centered Table
- Responsive Table
Borderless Table
It is a basic table without any border.Do not need to assign any class to the <table> element base class.
General Syntax
<table></table> Source Code
Download<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
| 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.
General Syntax
<table class="bordered"></table> Source Code
Download<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 stripped table, assign .striped class to the table element base class.
General Syntax
<table class="striped"></table> Source Code
Download<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 |
Highlight Table
To Create Materialize CSS highlight table, add .highlight class to the <table> element base class.
General Syntax
<table class="highlight"></table> Source Code
Download<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 |
Centered Table
To create materialize CSS centered table, assign .centered class to the table element base class.
General Syntax
<table class="centered"></table> Source Code
Download<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 |
Responsive Table
To create Materialize CSS responsive table, assign .responsive-table class to the <table> element base class.
General Syntax
<table class="responsive-table"></table> Source Code
Download<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 |