Home > DeveloperSection > Forums > How to design a table in Css
Ankit Singh

Total Post:341

Points:2389
Posted on    March-02-2016 10:20 PM

 CSS-CSS3 HTML  CSS-CSS3  CSS 
Ratings:


 1 Reply(s)
 290  View(s)
Rate this:
We want to  design a table in Css. How to design good look in css please give me a sample code.


aditya kumar Patel

Total Post:246

Points:1750
Posted on    March-02-2016 10:21 PM

@{

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>


Don't want to miss updates? Please click the below button!

Follow MindStick