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>

You Might like

View all