My CSS style includes a hyperlink for the "Title" to quickly navigate back to the home page. However, when I insert a table, this hyperlink gets disabled.
/* JavaScript */
.header {
position: absolute;
height: 85px;
right: 0;
top: 0;
left: 0;
padding: 1rem;
background-color: #3399CC;
text-align: center;
font-size: 100%;
color: #FFFFFF;
}
.wrap {
width: 100%;
max-width: 24em;
margin: auto;
}
.content {
position: absolute;
top: 0px;
margin-top: 5px;
margin-left: 5px;
}
h1:link, a:link {
color: white;
}
table, td, th {
border: 10px solid #ffffff;
text-align: left;
margin-top: 140px;
}
table {
border-collapse: initial;
width: 100%;
}
td {
padding: 15px;
width: 25%;
line-height: 2;
}
th {
background-color: grey;
color: white;
padding: 5px;
width: 25%;
}
td:hover {
background-color: #f5f5f5
}When I remove the content below, my Title remains a hyperlink. But adding this content causes it to lose its hyperlink functionality.
<body>
<div class="header">
<h1><a href="index.html" style="text-decoration: none">Title</h1>
</a> </div>
<!-- Here is my table content. -->
<div class="content">
<table class="ex1">
<tr>
<th>$company</th>
<th>$company</th>
<th>$company</th>
</tr>
<tr>
<td><img src="ateam.jpg" alt="team" style="width: 260px;
height: 150px;"> <br>
<b>URL:</b> $url <br>
<b>Location:</b> $location <br>
<b>Inductry:</b> $dropdown <br>
<b>Start Date:</b> $sdate   <b>End Date:</b> $edate <br>
<b>Announcement:</b><br>
$announcement <br></td>
</tr>
</table>
</div>
<footer></footer>
</body>I'm struggling to understand why adding a table affects the behavior of my "Title" hyperlink. Any assistance would be greatly appreciated.