Skip to content
Related Articles

Related Articles

Improve Article

Materialize CSS | Tables

  • Last Updated : 29 May, 2020

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:




    <!DOCTYPE html>
    <html>
      
    <head>
      
        <!--Import Google Icon Font-->
        <link href=
            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:




    <!DOCTYPE html>
    <html>
      
    <head>
        <!--Import Google Icon Font-->
        <link href=
            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:




    <!DOCTYPE html>
    <html>
      
    <head>
        <!--Import Google Icon Font-->
        <link href=
            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:




    <!DOCTYPE html>
    <html>
      
    <head>
        <!--Import Google Icon Font-->
        <link href=
            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:




    <!DOCTYPE html>
    <html>
      
    <head>
        <!--Import Google Icon Font-->
        <link href=
            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>

    Ouptut:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :