CSS Zebra Style Table

How to stylize HTML tables? CSS Tables Style Design

by ITpresent

HTML

<a href="https://itpresent.com/web/css/css_tables_examples.php" target="_blank">CSS Tables Style Design</a>



<br>
CSS Zebra Style Table

<table class="e">  
<caption><font color="black">GEOGRAPHICAL OVERVIEW</font></caption>
  <tr class="f">
    <th class="g">country</th>
    <th class="g">capital</th> 
    <th class="g">currency</th>
  </tr>
  <tr class="f">
    <td class="h">America</td>
    <td class="h">Washington</td>
    <td class="h">dollar</td>
  </tr>
  <tr class="f">
    <td class="i">Russia</td>
    <td class="i">Moscow</td>
    <td class="i">ruble</td>
  </tr>
  <tr class="f">
    <td class="h">Germany</td>
    <td class="h">Berlin</td>
    <td class="h">euro</td>
  </tr>
  <tr class="f">
    <td class="i">China</td>
    <td class="i">Beijing</td>
    <td class="i">yuan</td>
  </tr>
  <tr class="f">
    <td class="h">India</td>
    <td class="h">New Delhi</td>
    <td class="h">rupee</td>
  </tr>
</table>

CSS

.e {
  border-collapse: collapse;
  color:white;
  width:450px; 
  font-size:14px;
  font-weight:bold;
}
.f {
  background-color:#014a92;
  padding:8px; 
  border:2px solid silver;
 }
.g {
  padding:12px;
  border:2px solid silver;
  background-image: linear-gradient(blue,#014a92, blue);
}
.h {
  background-color:#56aaff;
  padding:8px;
  border:2px solid silver;
}
.i { 
padding:8px;
border:2px solid silver;
}