Tables

[Ebumar]

Okay, so I've been doing web design for quite a while now and I just can't figure one thing out. Say you are cutting up an image for linking, like nav bar for a layout. You are using tables, as opposed to an image map. When I use the tables I get a small bar between each one of the pictures. Can anyone explain to me how to get rid of that space between each table cell? Would defining the picture size as the same as the cell size do it?

Thanks in advance.

[Sylvus]

First off, I'm assuming that you have borders in your table off?

If so, you're looking at a cellpadding or cellspacing issue. I can't recall off the top of my head which is causing your problem, been a long time since I've thought about it, but use the following attributes in your table tag.

Code: Select all

<table border="0" cellpadding="0" cellspacing="0">

If that takes care of it, play with each of those and see which did it for you correctly.

[archeiron]

Sylvus is correct with his solution. You need to set both cell spacing and padding to zero to ensure that a table seemlessly joins the peices of the image together. Furthermore, if the images have links on them you will need to set border="0" in the image tag or use style="border:0px;". Otherwise, you will have the unsightly border using the color of links on your page.

Code: Select all

<img src="blah.gif" border="0" />

or

Code: Select all

<img src="blah.gif" style="border:0px;" />

[Ebumar]

Well, lets use the Pravus site as an example. (http://www.pravusdei.org) It has both cellspacing, cellpadding, and border all at 0. Also on the images themselves the border is 0. It still has the unsightly space between each picture, though.

As an aside, I don't do the design for the pravus site, which will be changing soon, just using it as an example.

[archeiron]

Specifying the size of the table (height and width) and that for each cell can also be a factor.