How to create a single border table with help of CSS

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.

<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 !!!
Posted by Zeeshan Umar
Labels:
Subscribe to: Post Comments (Atom)