<a> entire inside of table cell

[benjudy]

I'm at my wit's end here... any help would be greatly appreciated!

I'm building navigation tabs in a single-row <table>.

Any given tab may have one, two, or three lines of text. Text must be in the middle vertically and horizontally centered.

Here's the kicker: the entire inside area of the table cell must be clickable. In other words, the <a> has to fill the entire height and width of each cell -- regardless of how many lines of text.

When I have one cell with three lines of text, and another cell with only one, I can't seem to get it working.

I can either get the entire cell clickable, but the text aligned at the top. Or, I can get the text vertically in the middle, but the entire cell is not clickable. Frustrating.

Before anyone says, "why not use a list?", I've already been down that road. Can't meet all of the above requirements using <li>'s, no matter how many CSS tricks I've thrown at it. So, I'm going with a table.

Must work in FF and IE 5.5, 6
---
#tabs td{border:1px solid #000;font-size:3em;text-align:center;vertical-align:middle;}
#tabs a{background-color:green;display:block;height:100%;text-decoration:none;}
#tabs a:hover{background-color:yellow;}

<div id="tabs">
<table>
<tr>
<td><a href="#">tab 1</a></td>
<td><a href="#">tab 2<br/>line two</a></td>
<td><a href="#">tab 3<br/>line two<br/>line three</a></td>
</tr>
</table>
</div>