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.
It is a basic table without any border.Do not need to assign any class to the <table>
element base class.
<table></table>
<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>
Mobile | Email ID | |
---|---|---|
John Smith | 7894xxxx45 | johnsmith@gmail.com |
Jane | 78xx56xx78 | jane@gmail.com |
To create bordered table, add .bordered
class to the table
element base class.
<table class="bordered"></table>
<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>
Name | Mobile | Email ID |
---|---|---|
John Smith | 7894xxxx45 | johnsmith@gmail.com |
Jane | 78xx56xx78 | jane@gmail.com |
To create stripped table, assign .striped
class to the table
element base class.
<table class="striped"></table>
<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>
Name | Mobile | Email ID |
---|---|---|
John Smith | 7894xxxx45 | johnsmith@gmail.com |
Jane | 78xx56xx78 | jane@gmail.com |
To Create Materialize CSS highlight table, add .highlight
class to the <table>
element base class.
<table class="highlight"></table>
<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>
Name | Mobile | Email ID |
---|---|---|
John Smith | 7894xxxx45 | johnsmith@gmail.com |
Jane | 78xx56xx78 | jane@gmail.com |
To create materialize CSS centered table, assign .centered
class to the table
element base class.
<table class="centered"></table>
<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>
Name | Mobile | Email ID |
---|---|---|
John Smith | 7894xxxx45 | johnsmith@gmail.com |
Jane | 78xx56xx78 | jane@gmail.com |
To create Materialize CSS responsive table, assign .responsive-table
class to the <table>
element base class.
<table class="responsive-table"></table>
<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>
Name | Mobile | Email ID |
---|---|---|
John Smith | 7894xxxx45 | johnsmith@gmail.com |
Jane | 78xx56xx78 | jane@gmail.com |