How to use CSS for Table in HTML

How to use CSS for Table in HTML

In this article, you will learn How to use CSS for Table in HTML.

Example:-

table.html

<html>
<head>
<title>Table</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<table>
<tr>
<th>Roll No.</th><th>Name</th><th>Class</th><th>Gender</th><th>City</th>
</tr>
<tr>
<td>124</td><td>Amandeep Singh</td><td>BCA</td><td>Male</td><td>Amritsar</td>
</tr>
<tr>
<td>136</td><td>Nisha Sharma</td><td>MCA</td><td>Female</td><td>Patiala</td>
</tr>
</table>
</body>
</html>

style.css

table, th, td {
  border: 1px solid black;
}
table {
  width: 100%;
}
th {
  height: 50px;
text-align: left;
  background-color: #4CAF50;
  color: white;

}
td {
  height: 50px;
  vertical-align: bottom;
}
th, td {
  border-bottom: 1px solid #ddd;
}
tr:hover {background-color: #f5f5f5;}

You can check on Facebook