Open In App

Materialize CSS | Tables

Last Updated : 23 Dec, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

Tables are nice and easy way to organize a lot of data. Materialize CSS provides a few utility classes to style table. In addition to improve mobile experience, all tables on mobile-screen widths are centered automatically. Following are the styles for table:

  • Stripped Table:

html




<!DOCTYPE html>
<html>
 
<head>
 
    <!--Import Google Icon Font-->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
 
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
 
    <!--Let browser know website is
        optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
 
<body>
    <table class="striped">
        <thead>
            <tr>
                <th>Student</th>
                <th>Study Time(days)</th>
                <th>Marks</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>Atul</td>
                <td>2</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Aman</td>
                <td>4</td>
                <td>71</td>
            </tr>
            <tr>
                <td>Ansh</td>
                <td>2</td>
                <td>98</td>
            </tr>
            <tr>
                <td>John</td>
                <td>5</td>
                <td>96</td>
            </tr>
        </tbody>
    </table>
 
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
 
</html>


Output:

  • Bordered Table:

html




<!DOCTYPE html>
<html>
 
<head>
    <!--Import Google Icon Font-->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
 
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
 
    <!--Let browser know website is
        optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
 
<body>
    <table class="bordered">
        <thead>
            <tr>
                <th>Student</th>
                <th>Study Time(days)</th>
                <th>Marks</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>Atul</td>
                <td>2</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Aman</td>
                <td>4</td>
                <td>71</td>
            </tr>
            <tr>
                <td>Ansh</td>
                <td>2</td>
                <td>98</td>
            </tr>
            <tr>
                <td>John</td>
                <td>5</td>
                <td>96</td>
            </tr>
        </tbody>
    </table>
 
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
 
</html>


Output:

  • Highlighted Table: 

html




<!DOCTYPE html>
<html>
 
<head>
    <!--Import Google Icon Font-->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
 
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
 
    <!--Let browser know website is
        optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
 
<body>
    <table class="highlight">
        <thead>
            <tr>
                <th>Student</th>
                <th>Study Time(days)</th>
                <th>Marks</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>Atul</td>
                <td>2</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Aman</td>
                <td>4</td>
                <td>71</td>
            </tr>
            <tr>
                <td>Ansh</td>
                <td>2</td>
                <td>98</td>
            </tr>
            <tr>
                <td>John</td>
                <td>5</td>
                <td>96</td>
            </tr>
        </tbody>
    </table>
 
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
 
</html>


Output:

  • Centered Table: 

html




<!DOCTYPE html>
<html>
 
<head>
    <!--Import Google Icon Font-->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
 
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
 
    <!--Let browser know website is
        optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
 
<body>
    <table class="centered">
        <thead>
            <tr>
                <th>Student</th>
                <th>Study Time(days)</th>
                <th>Marks</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>Atul</td>
                <td>2</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Aman</td>
                <td>4</td>
                <td>71</td>
            </tr>
            <tr>
                <td>Ansh</td>
                <td>2</td>
                <td>98</td>
            </tr>
            <tr>
                <td>John</td>
                <td>5</td>
                <td>96</td>
            </tr>
        </tbody>
    </table>
 
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
 
</html>


Output:

  • Responsive Table:

html




<!DOCTYPE html>
<html>
 
<head>
    <!--Import Google Icon Font-->
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
 
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
 
    <!--Let browser know website is
        optimized for mobile-->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>
 
<body>
    <table class="responsive-table">
        <thead>
            <tr>
                <th>Student</th>
                <th>Study Time(days)</th>
                <th>Marks</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>Atul</td>
                <td>2</td>
                <td>80</td>
            </tr>
            <tr>
                <td>Aman</td>
                <td>4</td>
                <td>71</td>
            </tr>
            <tr>
                <td>Ansh</td>
                <td>2</td>
                <td>98</td>
            </tr>
            <tr>
                <td>John</td>
                <td>5</td>
                <td>96</td>
            </tr>
        </tbody>
    </table>
 
    <!-- Compiled and minified JavaScript -->
    <script src=
    </script>
</body>
 
</html>


Output:



Previous Article
Next Article

Similar Reads

Spectre Tables Stripped tables
Tables are important elements of web development society. If you want to display some data then you will definitely require tables. Spectre tables are the same as HTML tables, here we will discuss the Spectre Stripped tables. Tables Stripped tables Class: table-stripped: This class is used to make the table row(odd one) stripped. Syntax: &lt;table
1 min read
Spectre Tables Scrollable tables
Tables are important elements of web development society. If you want to display some data then you will definitely require tables. Spectre tables are the same as HTML tables, here we will discuss the Spectre Scrollable tables. Tables Scrollable tables Class: table-scroll: This class is used to create the table row vertically scroll-able. Syntax:
1 min read
How to Create Nested tables within tables in HTML ?
HTML tables are very helpful in structuring the content in the form of rows and columns. But sometimes there is a need to add a table within a table. HTML supports this functionality and is known as the nesting of the tables. Tables can be nested together to create a table inside a table. To create a nested table, we need to create a table using th
3 min read
Materialize CSS Preloader
Preloaders are used for providing symbolic messages that tells users about the website status like "Loading" or "Not crashed". Materialize provides CSS classes to give various types of preloaders. The following are the available classes provided by Materialize CSS. Linear: It identifies an element as a progress bar class required for "div" element.
5 min read
Explain Dialogs in Materialize CSS
Dialogs in Materialize CSS provide users additional information to users if needed by them. These are directly not visible on the web-page. The dialog transitions are related to the information that is required at that point of time. Materialize provides various methods to show dialogs. Syntax: Materialize.toast(string, time, styleClass,callback);
2 min read
Materialize CSS Colors
It is created with HTML, CSS, and JavaScript, and designed by Google. Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Color: Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional li
2 min read
Materialize CSS Grids
There are 12 standard columns fluid responsive grid systems that helps you to layout your page in an ordered and easy way. It uses the row and column style classes to define rows and columns respectively. Rows are used to specify a padding-less container to be used for responsive columns and col are used to specify a column with sub-classes. There
3 min read
Materialize CSS Helpers
There are several helpers in materialize CSS that are used for designing needs such as: AlignmentHiding/Showing contentFormatting 1. Alignment: Content can be aligned horizontally or vertically by using the following classes: Vertical Align: It can be easily done by adding the class valign-wrapper to the container holding the items that you want to
3 min read
Materialize CSS Badges
Materialize badge is a component that is used to notify, if there are new or unread messages or notifications display. Adding a new class to a badge component gives it a background. There are different ways of using badge component: Badges in Collections: &lt;div class="collection"&gt; &lt;a href="#!" class="collection-item"&gt;&lt;span class="badg
4 min read
Materialize CSS Breadcrumbs
Breadcrumbs in materialize CSS is used when you have multiple layers of content to display your current location. Materialize CSS provides various CSS classes to create a nice breadcrumb in an easy way. It uses two classes i.e. nav-wrapper and breadcrumb. nav-wrapper is used to set the nav component as breadcrumb/nav bar wrapper. breadcrumb is used
1 min read