Elegant and Professional Table CSS Code



Tables in Html pages are doing a very important role for the reader, with the table you can present the required data to the reader with good manner, There is plenty of table styles designed by web designers. I have created a Table CSS with a very easy method you can customize anything with the easy steps.

1 This is a default code for your blogger or any web project you can also cusomize it by changing the value. Sample Visit
Names and Working Field
1 Majid Ahmad Graphic Designer
2 Farhan Aziz Graphic Designer
3 Wasim Kareem Motion Designer
4 Amir Ashar Ch Whiteboard Animation
5 Muhammad Anas Software Engenier
6 Shazain Chaudhary Android App Developer


HTML CSS Code

  1. table{width:100%;overflow-x:auto;margin: auto;border-collapse: separate;
  2. border-spacing: 15px;
  3. border-radius: 5px;}
  4. td,th{padding: 10px;
  5. border: 0px solid black;
  6. border-radius: 0px 15px 0px 15px;
  7. color: black;
  8. font-weight: bold;
  9. text-align: left;background-color: white;box-shadow: 0 0 7px #000000;}
  10. th {background-color: #FA2131;
  11. color: white;
  12. font-weight: bold;
  13. font-size: 20px;
  14. text-align: center;border-radius: 5px 5px 0px 0px;}
  15. th:hover{background-color: black;}


HTML Table Code


<table >
<tr>
<th></th>
<th>Name</th>
<th>Working Field</th>
</tr>
<tr>
<td>1</td>
<td>Majid Ahmad Sultani</td>
<td>Graphic Designer</td>
</tr>
<tr>
<td>2</td>
<td>Farhan Aziz</td>
<td>Graphic Designer</td>
</tr>
<tr>
<td>3</td>
<td>Wasim Kareem</td>
<td>Motion Designer</td>
</tr>
<tr>
<td>4</td>
<td>Amir Ashar Ch</td>
<td>Whiteboard Animation maker</td>
</tr>

</table>



2This table have used class to change the cell background color, text color, text font this is just sample you can modify it as you want.

Names and Working Field
1 Majid Ahmad Graphic Designer
2 Farhan Aziz Graphic Designer
3 Wasim Kareem Motion Designer
4 Amir Ashar Ch Whiteboard Animation
5 Muhammad Anas Software Engenier
6 Shazain Chaudhary Android App Developer


Copy and paste the below css code after the above css code to extend new color in tables

HTML CSS Code

  1. td.blue{background-color: blue;color: white;}
  2. td.black{background-color: black;color: white;}
  3. td.white{background-color: #dd9547;color: white;}
  4. td.green{background-color: green;color: white;}
  5. td.red{background-color: red;color: white}
  6. td.pink{background-color: #c30acf;color: white;}
  7. td.orange{background-color: #f67119;color: white;}
  8. td.yellow{background-color: #b1a30c;color: white;}
  9. td.brown{background-color: #a13d2f;color: white;}
  10. td.Lgreen{background-color: #04AA6D;color: white;}
  11. td.Lblue{background-color: #178c85;color: white;}
  12. td.gray{background-color: #444444;color: white;}


HTML Table Code


<table >
<tr>
<th colspan="3">Names and Working Field</th>
</tr>
<tr>
<td class="green">1</td>
<td class="blue">Majid Ahmad</td>
<td class="green">Graphic Designer</td>
</tr>
<tr>
<td class="pink">2</td>
<td class="orange">Farhan Aziz</td>
<td class="black">Graphic Designer</td>
</tr>
<tr>
<td class="orange">3</td>
<td class="Lblue">Wasim Kareem</td>
<td class="pink">Motion Designer</td>
</tr>
<tr>
<td class="red">4</td>
<td class="brown">Amir Ashar Ch</td>
<td class="white">Whiteboard Animation</td>
</tr>
<tr>
<td class="yellow">5</td>
<td class="gray">Muhammad Anas</td>
<td class="red">Software Engenier</td>
</tr>
<tr>
<td class="blue">6</td>
<td class="Lgreen">Shazain Chaudhary</td>
<td class="yellow">Android App Developer</td>
</tr>
</table>

Post a Comment

Thanks for comment

http://youtube.com/efiautos

To be published, comments must be reviewed by the administrator *

Previous Post Next Post