Alternative Colored table using HTML and CSS only.
HTML for Table
<!DOCTYPE html>
<html>
<head>
<title>Colored Table | HTML</title>
<link rel="stylesheet" type =" text/css" href="style.css">
</head>
<body>
<table id="a">
<tr>
<th>id</th>
<th>Name</th>
<th>roll</th>
<th>class</th>
</tr>
<tr>
<td>1</td>
<td>ram</td>
<td>3</td>
<td>six</td>
</tr>
<tr>
<td>1</td>
<td>ram</td>
<td>3</td>
<td>six</td>
<tr>
<td>1</td>
<td>ram</td>
<td>3</td>
<td>six</td>
</tr>
<tr>
<td>1</td>
<td>ram</td>
<td>3</td>
<td>six</td>
</tr>
</table>
<br>
</p>
<!--copyright sign css entity-->
<h2>copyright2019</h2>
</body>
</html>
Style File for colors
<!------style.css file------>
#a {
width: 100%;
padding: 300px;
border: 5px solid gray;
table-layout:
}
table:hover {}
th,
td {
border: 1px solid black;
text-align: center;
height: 60px;
}
tr:nth-child(2n) {
background-color: pink;
}
tr:nth-child(2n+1) {
background-color: coral;
}
#a th {
background-color: green;
}
#a tr:nth-child(5) {
background-color: purple;
}
Feel free to comment if any queries. Don't hesitate. It might be late later.
Comments
Post a Comment