Stylesheets - How to eliminate space between table border and table contents?

Author

How to eliminate space between table border and table contents?

Michael Mayo

2005-12-05, 10:34 pm

I have a simple html page that contains an image in a single table cell,
surrounded by a border: <http://www.softrains.com/lc/test.html>. I would
like to eliminate the space between the table border and the table
contents. I have tried setting margin: 0 in CSS everywhere, as well as
cellmargin/cellpadding in HTML.

What is the best way to eliminate the extra space between a table border
and its contents?

Thanks,
-Mike

boclair

2005-12-05, 10:34 pm

Michael Mayo wrote:
> I have a simple html page that contains an image in a single table cell,
> surrounded by a border: <http://www.softrains.com/lc/test.html>. I would
> like to eliminate the space between the table border and the table
> contents.
> What is the best way to eliminate the extra space between a table border
> and its contents?

Add border-collapse:collapse to table style

Louise

David Ross

2005-12-05, 10:34 pm

Michael Mayo wrote:
>
> I have a simple html page that contains an image in a single table cell,
> surrounded by a border: <http://www.softrains.com/lc/test.html>. I would
> like to eliminate the space between the table border and the table
> contents. I have tried setting margin: 0 in CSS everywhere, as well as
> cellmargin/cellpadding in HTML.
>
> What is the best way to eliminate the extra space between a table border
> and its contents?

Don't use a table for this. Use a style-sheet or local style to
set the border on the image itself. Center the image using a div
with a centered style:
<div style="text-align:center"><img . . .></div>
(But I would probably use <p align="center">, which is still
tolerated under HTML 4.01 transitional.)

Tables should be used only to present information in a tabular
arrangement.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.

Adam Risser

2005-12-06, 7:29 pm

Why not eliminate the table and just add

style="border: solid #41A0D0 2px;"

to the image itself? Is that not what you want?

none

2005-12-06, 7:29 pm

On Tue, 06 Dec 2005 07:12:10 -0800, Adam Risser wrote:
> Why not eliminate the table and just add
> style="border: solid #41A0D0 2px;"
> to the image itself? Is that not what you want?

The page I presented is a bit oversimplified. In the final version, the
image will be at the top of a table containing the entire page, with a
border drawn around the entire page. So, I don't think this will work.

Thanks,
-Mike

none

2005-12-06, 7:29 pm

On Tue, 06 Dec 2005 01:38:14 +0000, boclair wrote:
> Add border-collapse:collapse to table style

Thanks very much for that answer! I read the w3c document on this and
it seems that the newer "collapsing border" model is much more versatile.
However, I also discovered that I could do it in the old model by
specifying a 'border-spacing' property:

border-collapse: separate;
border: solid #41A0D0 2px;
border-spacing: 0px;

Is there a preferred way to do it?

Thanks,
-Mike

none

2005-12-06, 7:29 pm

On Mon, 05 Dec 2005 18:32:08 -0800, David Ross wrote:
> Don't use a table for this.
> Tables should be used only to present information in a tabular
> arrangement.

You're right, but for political reasons I can't do it this way. I would
probably be beheaded in public.

-Mike

Lauri Raittila

2005-12-06, 7:29 pm

in comp.infosystems.www.authoring.html, none wrote:
> On Tue, 06 Dec 2005 07:12:10 -0800, Adam Risser wrote:
>
> The page I presented is a bit oversimplified. In the final version, the
> image will be at the top of a table containing the entire page, with a
> border drawn around the entire page. So, I don't think this will work.

Then something else will work. Wrapping anything to a table just to get a
border is a stupid idea, because it doesn't work on any browser, let
alone work similarly. And understanding how it should work, and how it
works in different browsers is not exactly simple. And it is not even
correct...

Wrap things to div instead, and give div a border. (and never wrap just
one element in something to get border, unless you need multible
borders/backgrounds/whatever)

Far more easy to get right. Unless you really need to get it work pixel
perfectly on NN3 or IE3, but then, why would you even consider CSS?

Anyway, if you happened to have image in table, and you would need to get
rid of that space, you could do some or all off:

table {border-spacing:0;} /* thakes away spacing between cells in
separated borderr modell*/
table {border-collapse:collapse;} /* changes border modell*/
img {vertical-align:top} /* aligns image to top of line*/
img {display:block;} /* changes image to block thus it is not rendered
on baseline*/

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

none

2005-12-06, 11:16 pm

On Tue, 06 Dec 2005 17:52:54 +0100, Lauri Raittila wrote:
> Then something else will work. Wrapping anything to a table just to get a
> border is a stupid idea, because it doesn't work on any browser,

What do you mean by 'doesn't work'? I agree that it isn't the right way to
do it, but I'm hoping that it will work anyway in most cases.

> Wrap things to div instead, and give div a border. (and never wrap just
> one element in something to get border, unless you need multible
> borders/backgrounds/whatever)

As I mentioned previously, I can't use the div tag anywhere in my html for
political reasons -- it has been officially declared an enemy of the
revolution.

> img
> {vertical-align:top} /* aligns image to top of line*/ img {display:block;}
> /* changes image to block thus it is not rendered on baseline*/

Hrm...aren't vertical-align:top and display:block the default for images?

Thanks,
-Mike

Eric Kenneth Bustad

2005-12-07, 11:02 pm

In article <pan.2005.12.07.00.58.36.233811@nowhere.invalid>,
none <noone@nowhere.invalid> wrote:
>On Tue, 06 Dec 2005 17:52:54 +0100, Lauri Raittila wrote:
>[snip]
>
>As I mentioned previously, I can't use the div tag anywhere in my html for
>political reasons -- it has been officially declared an enemy of the
>revolution.
>[snip]

Sounds more like a counter-revolution.

--
= Eric Bustad, Norwegian bachelor programmer

Steve Pugh

2005-12-07, 11:02 pm

none wrote:
> On Tue, 06 Dec 2005 17:52:54 +0100, Lauri Raittila wrote:

>
> Hrm...aren't vertical-align:top and display:block the default for images?

No. vertical-align: baseline and display: inline would be much closer
to the default presentation of <img> elements in most browsers.

Steve

Lauri Raittila

2005-12-07, 11:03 pm

in comp.infosystems.www.authoring.html, none wrote:

> As I mentioned previously, I can't use the div tag anywhere in my html for
> political reasons -- it has been officially declared an enemy of the
> revolution.

Then you should perhaps try some other forum, as your problem clearly is
not HMTL nor CSS.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>