How to solve a problem in CSS Learning

As the end of the semester is approaching, the teacher wants to check our JSP job, so he has to start learning jsp from the beginning; now I have just learned CSS and encountered some problems, but I keep trying, finally, some examples are listed here:

There is an example:

CSS style sheet: Table. BANNER {
Background: url(bannerw.bg.jpg) Repeat-X;
Width: 100%;
}
Table. Links {
Background: url(button%bg.jpg) Repeat-X;
Font-size: 12px;
Width: 100%;
}
A {
Width: 80px; Height: 32px;
Padding-top: 10px;
Text-Decoration: none;
Text-align: center;
Background: url(button1.jpg) No-Repeat;
}
A: link {color: #654300 ;}
A: visited {color: #654300 ;}
A: hover {
Color: # ffffff;
Text-Decoration: none;
Background: url(button2.jpg) No-Repeat;
}

The HTML code is:

I wrote this for the sake of beauty.

<Table cellpadding = "0" cellspacing = "0" class = "Links">
<Tr> <TD> <a href = "#"> homepage introduction </a>
<A href = "#"> online users </a>
<A href = "#"> query users </a>
<A href = "#"> online friends </a>
<A href = "#"> friend list </a>
<A href = "#"> View message </a>
<A href = "#"> send message </a> </TD> </tr>
</Table>

The result is that each navigation bar has a gap when you move the mouse up, but if the code is written as follows:

 

<Table cellpadding = "0" cellspacing = "0" class = "Links">
<Tr> <TD> <a href = "#"> homepage introduction </a>
<A href = "#"> online users </a> <a href = "#"> query online users </a> <a href = "#"> online friends </ a> <a href = "#"> friend list </a> <a href = "#"> View Messages </a> <a href = "#"> send messages </a> </TD> </tr>
</Table>

The gap can disappear.

For example, <Div class = "">

</Div> T there is a gap below the image. The elimination method is: <Div class = ""> </div>

If you are interested, you can try it. I hope that students who are learning jsp can help each other and avoid detours. I hope you will always come to me: