Materialize CSS Tables

Materialize CSS Tables

Materialize CSS tables provide predefined classes such as .striped, .highlight, .centered, .responsive-table that are used to display different styles of table.

Types Of Table Styles

  1. Borderless Table
  2. Bordered Table
  3. Striped Table
  4. Highlight Table
  5. Centered Table
  6. Responsive Table

Borderless Table

It is a basic table without borders. To create a borderless table, you do not need to add any predefined table class.

General Syntax

Try it now

Source Code

Try it now

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

Try it now

Source Code

Try it now

Source Code : Output

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

Striped Table

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

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

Materialize CSS Highlight Table

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

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

Materialize CSS Centered Table

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

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

Materialize CSS Responsive Table

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

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

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