I have spent 3 days trying to do something that I thought would be simple and straightforward, surely less than an hour's work. I wanted to display a list of icons (small images) with a border of contrasting color around each one. Preferably there would be a small space between each image and border. I finally hit upon a coding using nested tables that ALMOST accomplishes what I wanted, and which displays the same in the 3 browsers that I tried. This is the code
Code:
<table> <tr>                                                                                                                                 
 <td> <table onclick="Place(0)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="bl.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(1)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="th.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(2)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="rh.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(4)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="bh.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(8)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="lh.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(10)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>  
  <tr> <td style="padding:0; margin:0"> <img src="hl.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(5)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="vl.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(6)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="ul.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(12)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>  
  <tr> <td style="padding:0; margin:0"> <img src="ur.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(3)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="ll.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
 <td> <table onclick="Place(9)" style='cursor:pointer; border-style:solid; border-width:4px; border-collapse:collapse; border-color:aqua'>   
  <tr> <td style="padding:0; margin:0"> <img src="lr.gif" style="padding:0; margin:0"> </td> </tr> </table> </td>                            
</tr> </table>
As I said, this almost works, except that there is a gap of about 5 pixels between the bottom of the image and the bottom border. The other 3 borders line up correctly.

Is there any way around this? Is there some way I can specify that there should not be any bottom padding? This happens in IE, Firefox and Chrome with and without specifying
Code:
<!DOCTYPE html>