<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid orange;
padding: 8px;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers tr:hover {
background-color: orange;
color:white;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: orange;
color: white;
}
</style>
</head>
<body>
<table id='customers'>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>MindStick Pvt Ltd</td>
<td>www.mindstick.com</td>
<td>India</td>
</tr>
<tr>
<td>MindStick Pvt Ltd</td>
<td>www.mindstick.com</td>
<td>India</td>
</tr>
<tr>
<td>MindStick Pvt Ltd</td>
<td>www.mindstick.com</td>
<td>India</td>
</tr>
<tr>
<td>MindStick Pvt Ltd</td>
<td>www.mindstick.com</td>
<td>India</td>
</tr>
<tr>
<td>MindStick Pvt Ltd</td>
<td>www.mindstick.com</td>
<td>India</td>
</tr>
<tr>
<td>MindStick Pvt Ltd</td>
<td>www.mindstick.com</td>
<td>India</td>
</tr>
<tr>
<td>MindStick Pvt Ltd</td>
<td>www.mindstick.com</td>
<td>India</td>
</tr>
<tr>
<td>MindStick Pvt Ltd</td>
<td>www.mindstick.com</td>
<td>India</td>
</tr>
</table>
</body>
</html>
How to design a table using CSS?
Asked
19-Jul-2021
Viewed
514 times
