Hover over a div should change the background color but does not cover whole div?

Question

For my school project i would like to achieve

• if the user hovers his mouse pointer over a table the bgcolor of the cell should change

I tried

• changing the display of anchor to block and changing the cellpadding and tweaking a few things here and there.

My Problem is

• the cell-background changes on mouse over but it does not cover the ENTIRE cell (there are still gaps left on all the four sides where it shows differernt color)
• i think there are many easy ways to fix this and i sort of combine them all and do something silly which makes it all go wrong.

Any simple fixes?

P.S : i know the table tags are deprecated but i struggle to make rows and columns any other way. I find the other ways very tough. The table tag would not be causing it now, or would it? Also it is just a basic framework so no links have an url nor are there any proper colors.

HTML:

<div id = "heading"> EARTH HOUR </div>
<table style=width:100% cellpadding=7>
  <tr>    
    <td width=25% align=center bgcolor=blue><a href="">AIM</a></td>
    <td width=25% align=center bgcolor=blue><a href="">ACHIEVEMENTS</a></td>
    <td width=25% align=center bgcolor=blue><a href="">YOUR HELP</a></td>
    <td width=25% align=center bgcolor=blue><a href="">FAQ'S</a></td>
  </tr>    
</table>
<center><img src="earth.jpg" 
       style="width:300px;height:280px;position:relative;top:25px;">    
</center>

CSS:

#heading {
  padding:8px;
  text-align:center;
  background-image:url("images.jpg"); color:#00FF00; 
  font-size:300%;
  margin:-8px -8px 0px -8px;
  font-weight:bold;    
}

table, tr, td {         
  border-collapse:collapse;
  border: 3px solid red;
  color: white;
  font-size:110%; font-weight:bold;    
}

html, body { margin: 0; padding: 0; }    
html { height: 100% }
body { min-height: 100% }

#text { font-size:150%; margin:7px; }

a { display:block;}    
a:hover{ background-color:red; }


</style>

Answer 1

The reason is most likely that the hover is set on the link tag a and not on the td tag; therefore you still see a minor gap between the <a> and the surrounding <td>

See this example on codepen.io

I changed this:

table, tr, td {
     ...
     padding: 0;
}

td:hover { background-color: red; }
/* 
 a:hover { background-color: red; } <-- removed
*/ 

Answer 2

You should really be using a <nav> and <ul> element instead of the table method. Check out w3 schools html layout.

Tables for layoutare difficult to work with in general and it seems you are experiencing that first hand!