Materialize Tables Responsive

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>    
Try It Now

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>    
Try it yourself

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.

General Syntax

<table class="bordered"></table>    
Try It Now

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>    
Try it yourself

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>    
Try It Now

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>    
Try it yourself

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>    
Try It Now

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>    
Try it yourself

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>    
Try It Now

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>    
Try it yourself

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>    
Try It Now

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>    
Try it yourself

Source Code : Output

Name Mobile Email ID
John Smith 7894xxxx45 johnsmith@gmail.com
Jane 78xx56xx78 jane@gmail.com

Web Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS