Materialize CSS Striped 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 Striped Table is used to create the striped table with the help of striped class. In this article, we will discuss Striped Table in Materialize CSS.
Materialize CSS Striped Table Class:
- striped: This class is used to give the strip style to the table.
Syntax:
<table class="striped">
...
</table>
Example: The following code demonstrates the Materialize CSS Striped Table.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
< 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 Striped Table </ h4 >
< table class = "striped" >
< thead >
< tr >
< th > Student Name </ th >
< th > Obtained Marks </ th >
< th > Total marks </ th >
< th > Percentage(%) </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >Rohan</ td >
< td > 300 </ td >
< td > 500 </ td >
< td > 60 </ td >
</ tr >
< tr >
< td > Rahul </ td >
< td > 250 </ td >
< td > 500 </ td >
< td > 50 </ td >
</ tr >
< tr >
< td > John </ td >
< td > 400 </ td >
< td > 500 </ td >
< td > 80 </ td >
</ tr >
< tr >
< td > Deepak </ td >
< td > 450 </ td >
< td > 500 </ td >
< td > 90 </ td >
</ tr >
</ tbody >
</ table >
</ div >
</ body >
</ html >
|
Output:
Materialize CSS Striped Table
Reference: https://materializecss.com/table.html#striped
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...