How to stylize HTML tables?

HTML tables offer us a monotonous and boring overview of the data they contain.
With CSS we can stylize HTML tables so that they look more attractive and more transparent to us. Using CSS, we can quickly change the look of our tables by changing background colors, color and font style, borderlines and other things from the columns and headers that make up the tables.




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> 
   

GEOGRAPHICAL OVERVIEW
country capital currency
America Washington dollar
Russia Moscow ruble
Germany Berlin euro
China Beijing yuan
India New Delhi rupee

JSFiddle


<style>
.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;
}

</style>






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>  
   

GEOGRAPHICAL OVERVIEW
country capital currency
America Washington dollar
Russia Moscow ruble
Germany Berlin euro
China Beijing yuan
India New Delhi rupee

JSFiddle


<style>
.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;
}
</style>




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>
   

GEOGRAPHICAL OVERVIEW
country capital currency
America Washington dollar
Russia Moscow ruble
Germany Berlin euro
China Beijing yuan
India New Delhi rupee

JSFiddle


<style>
.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;
}
</style>


CSS Table with Row Hover Effects


<table class="o">  
<caption>GEOGRAPHICAL OVERVIEW</caption>
  <tr class="u">
    <th class="s">country</th>
    <th class="s">capital</th> 
    <th class="s">currency</th>
  </tr>
  <tr class="u">
    <td class="t">America</td>
    <td class="t">Washington</td>
    <td class="t">dollar</td>
  </tr>
  <tr class="u">
    <td class="t">Russia</td>
    <td class="t">Moscow</td>
    <td class="t">ruble</td>
  </tr>
  <tr class="u">
    <td class="t">Germany</td>
    <td class="t">Berlin</td>
    <td class="t">euro</td>
  </tr>
  <tr class="u">
    <td class="t">China</td>
    <td class="t">Beijing</td>
    <td class="t">yuan</td>
  </tr>
  <tr class="u">
    <td class="t">India</td>
    <td class="t">New Delhi</td>
    <td class="t">rupee</td>
  </tr>
</table> 
   

GEOGRAPHICAL OVERVIEW
country capital currency
America Washington dollar
Russia Moscow ruble
Germany Berlin euro
China Beijing yuan
India New Delhi rupee


<style>
.o {
border-collapse: collapse;
width:450px;
font-size:14px;
font-weight:bold;
}
.s {
background-color:maroon;
padding:12px;
border:2px ridge white;
color:white;
}
.t {
padding:8px;
border:2px ridge white;
}
.u {
background-color:silver;
}
.u:hover {
background-color:red;
}
</style>



Privacy Policy