Materialize CSS Tables

Materialize CSS tables have numerous predefined table utility classes that are used to enhance the look of HTML tables as well as create different types of tables such as bordered, striped, highlighted, etc.
A materialize table is used to organize a lot of data in the rows and columns. It improves the mobile experience; all tables on mobile-screen widths are centered automatically.

Types Of Materialize Tables

There are the following types of tables in Materialize CSS.

  1. Striped Table
  2. Highlight Table
  3. Centered Table
  4. Responsive Table

Materialize Table Classes

There are the following types of classes in the MaterializeCSS table:

Class Description
striped It is used to make a zebra-striped table.
highlight It is used to make a highlight table.
centered It is used to make a centered table.
responsive-table It is used to make the Materialize table responsive.

Striped Table

To make a striped table in Materialize CSS, add .striped class to the <table> tag. It adds zebra-striping to the alternate row of the table.

Example
Name Mobile Email ID
Smith 74xxxx45 smith@gmail.com
Jane Doe 758xx56xx78 janedoe@gmail.com

General Syntax

      <table class="striped"></table>
    
Try it now

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

Materialize CSS Highlight Table

To create a hover effect in the Materialize CSS table, simply add .highlight class to the <table> element. This class highlights the Materialize table's row whenever a user hovers in the row.

Example
Fruit Market Price
Mango Kanpur 10$
Orange Gorakhpur 2$

General Syntax

      <table class="highlight"></table>
    
Try it now

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

Materialize CSS Centered Table

Add .centered class to the table tag to center align all the text in the <table> element.

Example
Books Market Price
Java Kanpur 10$
PHP Gorakhpur 2$

General Syntax

      <table class="centered"></table>
    
Try it now

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

Materialize CSS Responsive Table

Materialize responsive table has the ability to scroll the table horizontally on the smaller screen widths. To make the Materialize tables responsive, add the .responsive-table class to the <table> element base class.

Example
Training Market Price
Java Kanpur 100$
PHP Gorakhpur 200$

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 now

Conclusion

Materialize CSS tables have different predefined classes, such as striped, highlight, centered, and responsive-table. These classes are used to make the striped table, highlight table, centered table, and responsive table. The responsive table shows a horizontal scrollbar on smaller screen widths.

Web Tutorials

Materialize CSS Tables
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4