how can I close up the space in a table of images? - html

Question

This is for a dense display of status information. Preferrably I would like to make the images butt up against each other. Where is the extra white space coming from?
Here's what the generated table elements look like:
<table>
<tr>
<td><small>anim-dept</small></td>
<td>
<a href="http://foo/bar">
<img height="24" width="32" src="http://foo/bar.jpg">
</a>
</td>
....

Answer 1

Use the border-collapse:collapse in the css for the table as follows
table{
border-collapse:collapse;
}
or only for an specific table with id images
table#images{
border-collapse:collapse;
}
Or (if you have no css)
<table cellspacing="0">
DEMOS: without border-collapse and with border-collapse and without css but cellspaacing

Answer 2

This might not be an optimal solution, but I was able to fix this by adding:
tr {
display:inline-block;
height:24px;
}
The css border-collapse: collapse only seems to work for columns, rows still have spacing. Setting the rows to inline-blocks instead of table-rows seems to fix it, although as I said it is probably not the best solution.

Answer 3

Set the TABLE's CELLSPACING and CELLPADDING to zero.
Note that you may need to add padding style to the first table row cells.
<table cellspacing="0" cellpadding="0">
<tr>
<td><small>anim-dept</small></td>
<td>
<a href="http://foo/bar">
<img height="24" width="32" src="http://foo/bar.jpg">
</a>
</td>
....