Removing extra space around <img> image table elements

I want to create a navigation mechanism similar to the click-on/mouse-over a hole # at this golf page. (Mouse over any of the small horizontal bars above numbers 1-18, or the numbers themselves.) Here's a different variant of it, this time with the horizontal bar below each link. (Mouse over Usage, Examples, etc.) The gist is that:

1. There's a row of text/number "cells" each with a horizontal bar.
2. The bar corresponding to the current page is "lit up" (changed color)
3. As you mouse over a bar or the associated text, that bar also lights up, and unlights as the mouse moves away
4. The bars and the text cells are clickable links

I'm using Atahualpa 3.51 and WP 2.92.

Currently I have these in a table using js mouseover GIF image swapping for the bars. It works in principle -- see the ninth bar here (it's obvious which "cell" is different). I've placed the elements in a table... but the table adds enormous amounts of extra space around each cell when there's an image/href in the cell. These cells are all marked <td width="8" height="2">, and the row is marked <tr height=2>.

Any ideas on how I can get all the extra space out of the table? (The WP editor shows only extra height but not extra width!) I already have a CSS insert that removes the border around the images (thanks to info found elsewhere in this forum), <table cellspacing=0 cellpadding=0>, etc.

BTW, I'm not wedded to tables as the means for doing this. I just need a row with 18 equally spaced numbers (1..18) and a color-changing horizontal bar over or under each.

Thanks.