1. Link Inside Table
<!DOCTYPE html>
<html>
<head></head>
<title>Table</title>
<body>
<table border="1" cellspacing="2" style="width:40%">
<caption>Life Expectancy By Current Age</caption>
<tr align="center">
<th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr align="center">
<td>Men</td>
<td>Women</td>
<td>Men</td>
<td>Women</td>
<td>Men</td>
<td>Women</td>
</tr>
<tr align="left">
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
<tr align="center">
</tr>
</table>
</body>
</html>
2.Change Table Row Color on Hover
<!DOCTYPE html>
<html>
<head></head>
<title>Hover Table</title>
<style>
tr:nth-child(even){
background-color: gold;
}
tr:hover{
background-color: orchid;
font-style: calc();
outline:2px dotted hotpink;
}
</style>
<body>
<table border="1" cellspacing="2" cellpadding="5" width="60%">
<caption> Details of Student</caption>
<tr align="center">
<th>S.N</th>
<th>Name</th>
<th>Age</th>
<th>Class</th>
</tr>
<tr align="center">
<td>1</td>
<td>John</td>
<td>16</td>
<td>9</td>
</tr>
<tr align="center">
<td>2</td>
<td>Johnny</td>
<td>10</td>
<td>4</td>
</tr>
<tr align="center">
<td>3</td>
<td>Joe</td>
<td>18</td>
<td>10</td>
</tr>
<tr align="center">
<td>4</td>
<td>Justin</td>
<td>5</td>
<td>1</td>
</tr>
<tr align="center">
<td>5</td>
<td>Jerry</td>
<td>21</td>
<td>12</td>
</tr>
</table>
</body>
</html>
.png)
No comments :
Post a Comment