CSS Fancy Table

How to stylize HTML tables? CSS Tables Style Design Examples

by ITpresent

HTML

<a href="https://itpresent.com/web/css/css_tables_examples.php" target="_blank">CSS Tables Style Design</a>
CSS Fancy Table
<table class="a">  
<caption>GEOGRAPHICAL OVERVIEW</caption>
  <tr class="b">
    <th class="c">country</th>
    <th class="c">capital</th> 
    <th class="c">currency</th>
  </tr>
  <tr class="b">
    <td class="d">America</td>
    <td class="d">Washington</td>
    <td class="d">dollar</td>
  </tr>
  <tr class="b">
    <td class="d">Russia</td>
    <td class="d">Moscow</td>
    <td class="d">ruble</td>
  </tr>
  <tr class="b">
    <td class="d">Germany</td>
    <td class="d">Berlin</td>
    <td class="d">euro</td>
  </tr>
  <tr class="b">
    <td class="d">China</td>
    <td class="d">Beijing</td>
    <td class="d">yuan</td>
  </tr>
  <tr class="b">
    <td class="d">India</td>
    <td class="d">New Delhi</td>
    <td class="d">rupee</td>
  </tr>
</table>

CSS

.a {
width:450px; 
font-size:14px;
font-weight:bold;
}
.b {
background-color:#d4e3e5; 
}
.c {
background-color:#68898E;
padding:7px;
border:2px solid #a9c6c9;
}
.d {
padding:7px;
border:1px solid #a9c6c9;
}