Materialize CSS Highlight Table

Last Updated : 12 Jul, 2022

Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. It is created and designed by Google. It is very easy to use to make our webpage dynamic and responsive.

Materialize CSS Table is used to store the data in the rows and columns in a well-structured manner. Materialize CSS Highlight Table is used to highlight the table rows when hovered with the help of the highlight class. In this article, we will discuss Highlight Table in Materialize CSS.

Materialize CSS Highlight Table Class:

highlight: This class is used to highlight the rows when hovered over the table rows.

Syntax:

<table class="highlight">
    ...  
</table>

Example: The following code demonstrates the Materialize CSS Highlight Table.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- 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> 
    <div class="container center-align"> 
        <h3 class="green-text"> GeeksforGeeks </h3> 
        <h4> Materialize CSS Highlight Table </h4> 
  
        <table class="highlight"> 
            <thead> 
                <tr> 
                    <th> Student Name </th> 
                    <th> Obtained Marks </th> 
                    <th> Total marks </th> 
                    <th> Percentage(%) </th> 
                </tr> 
            </thead> 
  
            <tbody> 
                <tr> 
                    <td> Raj </td> 
                    <td> 200 </td> 
                    <td> 500 </td> 
                    <td> 40 </td> 
                </tr> 
                <tr> 
                    <td> Rahul </td> 
                    <td> 250 </td> 
                    <td> 500 </td> 
                    <td> 50 </td> 
                </tr> 
                <tr> 
                    <td> Rocky </td> 
                    <td> 150 </td> 
                    <td> 500 </td> 
                    <td> 30 </td> 
                </tr> 
                <tr> 
                    <td> Deepak </td> 
                    <td> 450 </td> 
                    <td> 500 </td> 
                    <td> 90 </td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</body> 
  
</html>