Materialize Table

Materialize CSS provides different predefined table classes that are used with HTML basic tables. These classes make the table too elegant. You can also make the Materialize table responsive, which will be looking good on any device breakpoints.

Materialize table is divided into the following parts.

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.

Example

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

General Syntax

    <table></table>

Try It Now

Source Code

     
      <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

Bordered Table

To create bordered table, add .bordered class to the table element base class.

Example

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

General Syntax

    <table class="bordered"></table>

Try It Now

Source Code

     
      <table class="bordered">
  <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

Striped Table

To create stripped table, assign .striped class to the table element base class.

Example

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

General Syntax

    <table class="striped"></table>

Try It Now

Source Code

     
      <table class="striped ">
    <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

Highlight Table

To Create Materialize CSS highlight table, add .highlight class to the <table> element base class.

Example

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

General Syntax

    <table class="highlight"></table>

Try It Now

Source Code

     
      <table class="highlight ">
    <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

Centered Table

To create materialize CSS centered table, assign .centered class to the table element base class.

Example

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

General Syntax

    <table class="centered"></table>

Try It Now

Source Code

     
      <table class="centered ">
    <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

Responsive Table

To create Materialize CSS responsive table, assign .responsive-table class to the <table> element base class.

Example

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

General Syntax

    <table class="responsive-table"></table>

Try It Now

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>

Try it yourself

Conclusion

There are different predefined table classes such as borderless, striped, highlighted, centered, and responsive tables. It plays an important role to make different type of tables. You can also make the Materialize table responsive easily by assigning the responsive-table class to the <table> element.

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS