Make your tables seem better by using CSS.

Table in HTML with Zebra Stripes

Adding a backdrop color to every other table row will create the appearance of
zebra stripes.

Use the:nth-child(even) selector in the following way to style each additional
table row element:


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table styling in HTML</title>
    <style>
        table {
          border-collapse: collapse;
          width: 100%;
        }

        th, td {
          text-align: left;
          padding: 8px;
        }

        tr:nth-child(even) {
          background-color: #72f112;
        }
  </style>
</head>
<body>

    <h2>Table with zebra stripes</h2>
    <p>Use the nth-child() selector and give all even (or odd) table rows a background colour for zebra-striped tables:</p>
    <table>
      <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Result</th>
      </tr>
      <tr>
          <td>Preety</td>
          <td>Jain</td>
          <td>Pass</td>
      </tr>
      <tr>
          <td>Luesh</td>
          <td>Goft</td>
          <td>Fail</td>
      </tr>
      <tr>
          <td>Jay</td>
          <td>Jain</td>
          <td>Pass</td>
      </tr>
      <tr>
          <td>Clandk</td>
          <td>Trunk</td>
          <td>fail</td>
      </tr>
  </table>

</body>

</html>

Table with zebra stripes

The styling will appear on row 1,3,5, etc. instead of 2,4,6 etc. if you use
(odd) instead of (even).

MR STAR EDIT

Vertical Dividers

You will have a table with horizontal dividers if you just define borders at
the bottom of each table row.

To create horizontal divisions, give all tr elements the border-bottom
property:


Preview:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Table styling in HTML</title>
    <style>
        table {
          border-collapse: collapse;
          width: 100%;
        }

        tr {
          border-bottom: 1px solid #605c5c;
        }
  </style>
</head>
<body>

    <h2>Table Dividers with Borders</h2>
    <p>For horizontal dividers, give the tr elements the border-bottom property:</p>
    <table>
      <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Result</th>
      </tr>
      <tr>
          <td>Preety</td>
          <td>Jain</td>
          <td>Pass</td>
      </tr>
      <tr>
          <td>Luesh</td>
          <td>Goft</td>
          <td>Fail</td>
      </tr>
      <tr>
          <td>Jay</td>
          <td>Jain</td>
          <td>Pass</td>
      </tr>
      <tr>
          <td>Clandk</td>
          <td>Trunk</td>
          <td>fail</td>
      </tr>
  </table>

</body>

</html>

Table Dividers with Borders

MR STAR CREATOR
Rate this post

Categorized in: