Open In App

Materialize CSS | Tables

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:



Last Updated : 23 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads