CSS Striped Tables

Please Share On:

Definition:

CSS striped property is used to change the row background color into striped format with even and odd rows. You can use a different color background striped. To select the color, visit “Standard Color Names“.

Syntax:

tr:nth-child(even){
background-color: cornsilk;
}

tr:nth-child(odd){
background-color: #f0f8ff;
}

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
 
table, th, td {
  border: 1px dotted red;
  }
 
th, td {
  text-align: left;
  padding: 8px;
}
 
th {
  background-color: darkmagenta;
  color: white;
}
 
tr:nth-child(even){
background-color: cornsilk;
}
 
</style>
</head>
<body>
 
<h3>Example of CSS Striped Table</h3>
 
<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>
 
</body>
</html>

Output:

CSS Striped Table

CSS Striped Odd Rows: Source Code

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
 
table, th, td {
  border: 1px dotted red;
  }
 
th, td {
  text-align: left;
  padding: 8px;
}
 
th {
  background-color: darkmagenta;
  color: white;
}
 
tr:nth-child(odd){
background-color: cornsilk;
}
 
</style>
</head>
<body>
 
<h3>Example of CSS Striped Table on Odd Rows</h3>
 
<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>
 
</body>
</html>

Output:

CSS Striped on odd rows

CSS Striped Used on Even and Odd Rows Together

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
}
 
table, th, td {
  border: 1px dotted red;
  }
 
th, td {
  text-align: left;
  padding: 8px;
}
 
th {
  background-color: darkmagenta;
  color: white;
}
 
tr:nth-child(even){
background-color: cornsilk;
}

tr:nth-child(odd){
background-color: #f0f8ff;
}
 
</style>
</head>
<body>
 
<h3>Example of CSS Striped Even and Odd Rows</h3>
 
<table>
  <tr>
    <th>S.No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
  <tr>
    <td>4.</td>
    <td>Salman</td>
    <td>Khan</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>5.</td>
    <td>Sachin</td>
    <td>Tendugar</td>
    <td>Sports</td>
  </tr>
</table>
 
</body>
</html>

Output:

CSS Striped Even and Odd Rows

You may be interested in the following topics:

Post Views: 555

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial