Hey, | there are sp | aces in my ta | ble! |
There are a few reasons why there may be spaces in your tables. And keep in mind that when using tables in this manner, different browsers will sometimes render your table in different ways. Add to that, the same browser may render your table differently depending on the DocType you choose for your page. So, the moral here is... don't get too crazy using tables to lay out images and check your work in a couple different browsers.
Change this:
<td>
<img>
</td>
To this:
<td><img></td>
Or, change this:
<td>
<img>
<img>
<img>
</td>
To this:
<td><img><img><img></td>
If you want to add carriage returns, do it within the tags themselves rather than between them:
<td
property1="0"
property2="0"
property3="0"><img
attribute1="0"
attribute2="0"
attribute3="0"></td>
When you use a strict doctype, all Gecko browsers (Firefox, Mozilla, etc) correctly put images in table cells on the baseline of the linebox (that's the same as the text baseline, which allows space for text descenders) and thus you get the gaps that you see. As a concession to tables-based designers, Gecko browsers do not do this when a transitional doctype is used.
If you want to keep your strict doctype, you can eliminate the gaps by setting your images to display block. To do this, add the following rule to your stylesheet
img { display: block; }
But it is really more appropriate and less problematic to go with a transitional doctype when using a tables-based design.
Keep in mind that these things can be happening one at a time, or in combination. Also, even with these three direct causes eliminated, you may find that something else is causing the problem indirectly.
Table Tutor |
|
Tables Quick Reference |
HTML 4.0 Reference Barebones HTML Guide |
![]() |