When I was new with CSS, I found it very difficult to create a single bordered excel like tables. Most of the time my tables look like this:-
So I learned a trick through which I can get a smooth 1px border quite easily. Here is the CSS which I use to create good looking tables.
Here is how above code's output looks like on browser:-
Feel free to share your comments. Happy Coding !!!
So I learned a trick through which I can get a smooth 1px border quite easily. Here is the CSS which I use to create good looking tables.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> table, td, th { border: 1px solid #A0A0A0; /*Border Color*/ border-collapse: collapse; } th { background-color: #0875CC;/*Background color of Header*/ color: white;/*Font Color of Header*/ border-collapse: collapse; } </style> </head> <body> <form id="form1" runat="server"> <div> <table cellpadding="4"> <tr> <th> First Name </th> <th> Last Name </th> <th> Age </th> </tr> <tr> <td>Zeeshan</td> <td>Umar</td> <td>29</td> </tr> <tr> <td>Hassan</td> <td>Hamayoun</td> <td>25</td> </tr> <tr> <td>Muhamamd</td> <td>Arshad</td> <td>49</td> </tr> </table> </div> </form> </body> </html>
Here is how above code's output looks like on browser:-
First Name | Last Name | Age |
---|---|---|
Zeeshan | Umar | 29 |
Hassan | Hamayoun | 25 |
Muhamamd | Arshad | 49 |
Feel free to share your comments. Happy Coding !!!