CSS Colorful 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 Examples</a><br>

CSS Colorful Table

<table class="m">  
<caption><font color="black">GEOGRAPHICAL OVERVIEW</font></caption>
  <tr>
    <th class="n">country</th>
    <th class="n">capital</th> 
    <th class="n">currency</th>
  </tr>
  <tr>
    <td class="p">America</td>
    <td class="r">Washington</td>
    <td class="p">dollar</td>
  </tr>
  <tr>
    <td class="r">Russia</td>
    <td class="p">Moscow</td>
    <td class="r">ruble</td>
  </tr>
  <tr>
    <td class="p">Germany</td>
    <td class="r">Berlin</td>
    <td class="p">euro</td>
  </tr>
  <tr>
    <td class="r">China</td>
    <td class="p">Beijing</td>
    <td class="r">yuan</td>
  </tr>
  <tr>
    <td class="p">India</td>
    <td class="r">New Delhi</td>
    <td class="p">rupee</td>
  </tr>
</table>

CSS

.m { 
border-collapse: collapse;
width:450px; 
font-size:14px;
font-weight:bold;
}
.n { 
background-color:darkgreen;
padding:12px;
border:2px solid silver;
color:yellow;
}
.p {
background-color:#009900;
padding:8px;
border:2px solid silver;
color:yellow;
}
.r { 
background-color:lime;
padding:8px;
border:2px solid silver;
color:#00611C;
}