Create the Striped Table with CSS

Striped Table is a table have clear delineation between the even and odd row:
View the example below, we have the HTML table like this:

 <table>
      <tbody><tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
      <tr>
        <td>Guts</td>
        <td>Betn</td>
        <td>gme34@mail.com</td>
      </tr>
      <tr>
        <td>Lusis</td>
        <td>Grander</td>
        <td>grdLis@mail.com</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Bont</td>
        <td>bontbont@mail.com</td>
      </tr>
      <tr>
        <td>Clever</td>
        <td>Jep</td>
        <td>Clevermend@mail.com</td>
      </tr>
 </tbody></table>
Copy this code


Add some CSS code below to making the difference between all of rows:

table {
border-collapse: collapse;
width: 100%;
font-size: 16px;
border: 1px solid #eee;
}
th,
td {
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color: #0b7cb1;
color: #fff;
}
Copy this code


Note: We use the nth-child CSS function with even param to change the background color of all even rows of the table.
You can change to odd if you want to do that with all odd rows of the table.

Demo: