HOW TO DESIGN A TABLE IN CSS

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
HTML  CSS-CSS3  CSS 
 631  View(s)
Ratings:
Rate this:
We want to  design a table in Css. How to design good look in css please give me a sample code.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to design a table in Css

    @{

    Layout = null;

    }

    <!DOCTYPE html>

    <html>

    <head>

    <meta name="viewport" content="width=device-width" />

    <title>Table Design</title>

    <style>

    table {

    width: 100%;

    }

    th {

    height: 50px;

    text-align: left;

    }

    td {

    height: 50px;

    height: 31px;

    vertical-align: middle;

    }

    th, td {

    padding: 15px;

    text-align: left;

    }

    tr:hover {background-color: #f5f5f5}

    tr:nth-child(even) {background-color: #f2f2f2}

    th {

    background-color: #488ADC;

    color: white;

    }

    </style>

    </head>

    <body>

    <table>

    <tr>

    <th>First Name</th>

    <th>Last Name</th>

    <th>Email</th>

    <th>Contact No</th>

    <th>Address</th>

    </tr>

    <tr>

    <td>Aditya</td>

    <td>Patel</td>

    <td>aditya@gmail.com</td>

    <td>7798******</td>

    <td>allahabad</td>

    </tr>

    <tr>

    <td>manoj</td>

    <td>Patel</td>

    <td>manoj@gmail.com</td>

    <td>7798******</td>

    <td>allahabad</td>

    </tr>

    <tr>

    <td>mohit</td>

    <td>Patel</td>

    <td>Mohit@gmail.com</td>

    <td>7798******</td>

    <td>allahabad</td>

    </tr>

    </table>

    </body>

    </html>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!