w3resource

HTML CSS Exercise: Zebra table

Solution:

HTML Code:

<!DOCTYPE HTML><!-- Specifies the document type and version of HTML -->
<html lang="en"><!-- Begins the HTML document and sets the language to English -->
<head>
<meta charset=utf-8><!-- Sets the character encoding to UTF-8 -->
<title>HTML CSS exercise - CSS3 Zebra Striping a Table</title><!-- Sets the title of the webpage -->
<style type="text/css"> /* Begins CSS styling */
table { /* Styles for the table element */
border:1px solid silver; /* Sets a border for the table */
}
th { /* Styles for table header cells */
background-color: #ccc; /* Sets the background color of table header cells */
}
tbody tr:nth-child(even) { /* Selects even rows in the table body */
background-color: #abe113; /* Sets the background color for even rows */
}
</style>
</head>
<body>
<table><!-- Begins a table -->
<tr><th>Id</th><th>Name</th><th>Major</th></tr><!-- Table header row -->
<tr><td>1001</td><td>Gopl Murthy</td><td>Physics</td></tr><!-- Table data rows -->
<tr><td>1002</td><td>Joy Sen</td><td>Economics</td></tr>
<tr><td>1003</td><td>Chandu Yadav</td><td>Chemistry</td></tr>
<tr><td>1004</td><td>Shalini Gupta</td><td>Zoology</td></tr>
<tr><td>1004</td><td>Vivek Kumar</td><td>Math</td></tr>
<tr><td>1004</td><td>Sameer Ali</td><td>Botany</td></tr>
</table><!-- Ends the table -->
</body>
</html>

Explanation:

  • This HTML/CSS code creates a table with zebra striping, where even rows have a different background color from odd rows.
  • The table is styled using CSS to add a border, and the table header cells (th) have a different background color.
  • CSS nth-child pseudo-class is used to select and style even rows of the table body with a different background color.

Live Demo:

See the Pen zebra-table-answer by w3resource (@w3resource) on CodePen.


Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.