Materialize CSS | Tables

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
      
        <!--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=
    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
        </script>
    </body>
      
    </html>

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    Output:
    

    • 

  • Bordered Table:

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> 
    

      
    

        <!--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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> 
    

        </script> 
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    

    • 

  • Highlighted Table:

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> 
    

      
    

        <!--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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> 
    

        </script> 
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    

    

    • 

  • Centered Table:

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> 
    

      
    

        <!--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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> 
    

        </script> 
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output:
    

    • 

  • Responsive Table:

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> 
    

      
    

        <!--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= 
    

    "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> 
    

        </script> 
    

    </body> 
    

      
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Ouptut:
    

    • 



full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
tanvi_gupta
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.