Screenreaders work better, ( i.e. more intuitively and standardized ), with tables than they do with some div layouts that force table-like display using floating/positioning, or with div layouts that want to order markup weirdly for the purpose of upping search engine rankings. It's an old myth that screenreaders fail with tables; more modern readers are very capable of reading tables, whether they be used for layout or pure tabular data.
Order of markup and correct use of 'special tags' is more important than the block tags used in markup. Search engines and screenreaders alike care little for table/div/span... all are at best semantically meaningless. 'h1', 'h2', 'title' should be important, as is 'a' and others.

Great in theory. Not so great in practice. XHTML defines a series of tags, the purpose of most of them is layout and presentation. If you really only care about 'semantics', use plain XML and style that with CSS; you might have compatibility problems for the moment since only the latest browsers support XML pages.. and you need the latest CSS standard to be well implemented for it to be useful for anything non-trivial.. but I guess, any 'web developer worth their salt' isn't as bothered about compatilibity and what they can actually DO with the tools available as they are meeting what they (incorrectly) believe to be a standard..

Aside, it's often the case, that to get enough 'style estate' to do anything reasonable on a page, you need to add meaningless structures solely for the purpose of locking CSS onto them. Out of the nearest window goes your idealistic image of a 'semantic representation' of the page. XHTML is a very capable data presentation language, but in no way is it a capable data description language. CSS isn't sufficient to replace every XHTML construct, or there'd be no point in those constructs continuing to exist.

If you use three layers of divs to make a structure conform to anything that acts in a 'tabular way', you fail to meet a time-honoured paradigm in software design - it's better to use something that does what you want already; in a correct, standardized and tested way; than hack on the surface at something that does it halfway.

Very well said MidiMagic and Matt, I totally agree with you both!!!

But what about Matty's problem, small little spaces still left. I think its firefox problem. It works in IE though, so Matts signature fits the best. lo;

Try this, aswel as the code recommended by MidiMagic to ensure that the relevant cells have no inner padding.
That'll make images act like blocks, so, if you're relying on the inline behaviour of images, you might be able to get away with removing the display:block;.. the important part is to make sure that images have no margin ( outer padding ).. but, browsers ( particularly Firefox ) seem to make their own rules for the initial vertical spacing/line height/baseline/etc for text, and images are as specified, inline, thus subject to 'text rules' for placement.

But Matt, I reckon, I also tried that thing, but didn't work on firefox.

Have you got code for a page that I can look at?

I used the page posted by Matty, but modified by me posted before.

Hm, I can't seem to reproduce the problem.. Using the code in post #4 with no modifications ( except changing the imgs' srcs to point at Matty's server )... Firefox 2 on Linux, screenshot attached.. But I can't see any gaps...

With the link Matty posted (in #5), I also see no gaps.. but the layout breaks down at widths larger than a certain threshold in Firefox and Opera, and I imagine also IE..

Can you post a screenshot of how you see the code in post #4, on your FF vishesh. Put 'http://stormtrooper.webng.com/' infront of all of the image srcs.. sorry about the hotlinking Matty =P

Actually, the margins, borders, and padding are all OUTSIDE an image on both browsers.

But block objects are different on the two browsers:

- FF puts the margins, borders, and padding OUTSIDE the set size of a div or other block object.

- IE puts the margins, borders, and padding INSIDE the set size of a div or other block object.

Err...I changed img src's to Matty's server cause I didn't wanted to copy each image to my computer, so I simply pointed it directly since I'm using my regular editor. Also I set cellpadding and cellspacing to 0 and removed width="60%", didn't used styles. This removed big large spaces.

But I tried to several things including the remedy above before to remove the small pixel width spaces still left, but didn't worked on FF.

It's too late, I suppose. He has changed several things and the that problem couldn't be seen now(just observed this now). I didn't have copies of those images.

Also I see the images changed(basically background to white). So I think those small white spaces(since the page background was white) been covered by white images. Will have to check if they still exist by changing the page background.