HTML Table Styling

HTML Table – Zebra Stripes
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse:collapse;
  padding:15px;
}
tr:nth-child(even){
  background-color: aquamarine;

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

</style>

<body>

  
  <table style="width: 50%;">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Food</th>
      <th>Color</th>
    </tr>
    <tr>
      <td>Ronaldo</td>
      <td>34</td>
      <td>Apple</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Messi</td>
      <td>40</td>
      <td>Orange</td>
      <td>Black</td>
    </tr>
    <tr>
      <td>Nemar</td>
      <td>28</td>
      <td>Banana</td>
      <td>White</td>
    </tr>
    <tr>
      <td>Mbappe</td>
      <td>24</td>
      <td>Mango</td>
      <td>Yellow</td>
    </tr>
  </table>

</body>
</html>
table eke peli wena wenama තිරස්ව color karanna puluwan me widiyata
  • (odd) ඔත්තේ (even)ඉරට්ටේ
  • :nth-child(even/odd) Css ekedi yodaganne me tag eka
HTML Table – Vertical Zebra Stripes
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse:collapse;
  padding:15px;
}

th:nth-child(even),td:nth-child(even){
  background-color: aquamarine;

}
th:nth-child(odd),td:nth-child(odd){
  background-color: antiquewhite;
}

</style>

<body>

  
  <table style="width: 50%;">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Food</th>
      <th>Color</th>
    </tr>
    <tr>
      <td>Ronaldo</td>
      <td>34</td>
      <td>Apple</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Messi</td>
      <td>40</td>
      <td>Orange</td>
      <td>Black</td>
    </tr>
    <tr>
      <td>Nemar</td>
      <td>28</td>
      <td>Banana</td>
      <td>White</td>
    </tr>
    <tr>
      <td>Mbappe</td>
      <td>24</td>
      <td>Mango</td>
      <td>Yellow</td>
    </tr>
  </table>

<br><br>

</body>
</html>
table eke peli wena wenama සිරස්ව color karanna puluwan me widiyata
  • (odd) ඔත්තේ (even)ඉරට්ටේ
  • :nth-child(even/odd) Css ekedi yodaganne me tag eka
Combine Vertical and Horizontal Zebra Stripes
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse:collapse;
  padding:15px;
}

tr:nth-child(even){
  background-color: rgba(150, 212, 212, 0.4);

}
th:nth-child(odd),td:nth-child(odd){
  background-color: rgba(150, 212, 212, 0.4);
}

</style>

<body>

  
  <table style="width: 50%;">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Food</th>
      <th>Color</th>
      <th>County</th>
    </tr>
    <tr>
      <td>Ronaldo</td>
      <td>34</td>
      <td>Apple</td>
      <td>Red</td>
      <td>Portugal's</td>
    </tr>
    <tr>
      <td>Messi</td>
      <td>40</td>
      <td>Orange</td>
      <td>Black</td>
      <td>Argentine</td>
    </tr>
    <tr>
      <td>Nemar</td>
      <td>28</td>
      <td>Banana</td>
      <td>White</td>
      <td>Brazilian</td>
    </tr>
    <tr>
      <td>Mbappe</td>
      <td>24</td>
      <td>Mango</td>
      <td>Yellow</td>
      <td>France </td>
    </tr>
  </table>

<br><br>

</body>
</html>
table eke peli wena wenama ekata සිරස්ව හා තිරස්ව color karana eka karanne me widiyata
  • (odd) ඔත්තේ (even)ඉරට්ටේ
  • :nth-child(even/odd) Css ekedi yodaganne me tag eka
  • rgb color pawichchi karannna ethakota සිරස්ව හා තිරස්ව peli dekama ekata ekathu wena thena thada color ekak pennane
Hoverable Table
<html>
<style>

table,th,td{
  border: 1px solid black;
  border-collapse:collapse;
  padding:15px;
}

tr:hover{
  background-color: rgba(150, 212, 212, 0.4);
}

</style>

<body>

  
  <table style="width: 50%;">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Food</th>
      <th>Color</th>
      <th>County</th>
    </tr>
    <tr>
      <td>Ronaldo</td>
      <td>34</td>
      <td>Apple</td>
      <td>Red</td>
      <td>Portugal's</td>
    </tr>
    <tr>
      <td>Messi</td>
      <td>40</td>
      <td>Orange</td>
      <td>Black</td>
      <td>Argentine</td>
    </tr>
    <tr>
      <td>Nemar</td>
      <td>28</td>
      <td>Banana</td>
      <td>White</td>
      <td>Brazilian</td>
    </tr>
    <tr>
  </table>

<br><br>

</body>
</html>
table eke peli uda mouse eka aran yaddi color eka hover wela pennane
  • :hover Css ekedi yodaganne me tag eka
Scroll to Top