table gutter spacing in CSS

I have a table with 3 columns in 1 row. I want to increase the spacing
_between_ the columns (gutter) _without_ increasing the spacing between
those columns and the table itself. Is there a way to do that in CSS
without having to code in extra dummy columns in HTML to create gutters?

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

28 Apr 2006 22:41:33 GMT from <phil-news-nospam (AT) ipal (DOT) net>:

I have a table with 3 columns in 1 row. I want to increase the spacing
_between_ the columns (gutter) _without_ increasing the spacing between
those columns and the table itself. Is there a way to do that in CSS
without having to code in extra dummy columns in HTML to create gutters?

I'm sure there is, but I don't understand your question.

The columns are _part_of_ the table, no? Then what do you mean by
"spacing between those columns and the table" -- how can there be
space between a thing and part of itself?

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:

28 Apr 2006 22:41:33 GMT from <phil-news-nospam (AT) ipal (DOT) net>:
I have a table with 3 columns in 1 row. I want to increase the spacing
_between_ the columns (gutter) _without_ increasing the spacing between
those columns and the table itself. Is there a way to do that in CSS
without having to code in extra dummy columns in HTML to create gutters?

I'm sure there is, but I don't understand your question.

The columns are _part_of_ the table, no? Then what do you mean by
"spacing between those columns and the table" -- how can there be
space between a thing and part of itself?

I would guess he means to increase the spacing between the borders of
cells of adjacent columns, but between the borders of the cells in the
outermost columns and the borders of the table.

Going across the row:
table border - border-spacing - cell - border-spacing - cell -
border-spacing - cell - border-spacing - table border

So the objective is to have different values for the outer two lots of
border-spacing than for the inner two.

As the border-spacing property is set for the whole table this isn't
easily done with CSS.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

On Sat, 29 Apr 2006 05:55:45 -0400 Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:

28 Apr 2006 22:41:33 GMT from <phil-news-nospam (AT) ipal (DOT) net>:
I have a table with 3 columns in 1 row. I want to increase the spacing
_between_ the columns (gutter) _without_ increasing the spacing between
those columns and the table itself. Is there a way to do that in CSS
without having to code in extra dummy columns in HTML to create gutters?

I'm sure there is, but I don't understand your question.

The columns are _part_of_ the table, no? Then what do you mean by
"spacing between those columns and the table" -- how can there be
space between a thing and part of itself?

The gutter is the space specifically between the cells, borrowed from the
newspaper typesetting term used for the space between columns, which is
what I'm using cells for in this case.

There certainly can be space between the cells. The cells AND the space
are part of the table.

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

On Sat, 29 Apr 2006 11:30:48 -0400 Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote:

To further the education of mankind, Steve Pugh <steve (AT) pugh (DOT) net
vouchsafed:

The columns are _part_of_ the table, no? Then what do you mean by
"spacing between those columns and the table" -- how can there be
space between a thing and part of itself?

I would guess he means to increase the spacing between the borders of
cells of adjacent columns, but between the borders of the cells in the
outermost columns and the borders of the table.

Going across the row:
table border - border-spacing - cell - border-spacing - cell -
border-spacing - cell - border-spacing - table border

So the objective is to have different values for the outer two lots of
border-spacing than for the inner two.

As the border-spacing property is set for the whole table this isn't
easily done with CSS.

Without actually having tried it, I think it's just a matter of perspective
(-and table padding and table borders. Of course padding isn't spacing,
but...)

However, padding goes everywhere. I don't want to increase that. I just
want to increase that which is between cells of the same row ... between
the <td> elements within a <tr> of a <table>.

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

On Sat, 29 Apr 2006 13:06:13 +0100 Steve Pugh <steve (AT) pugh (DOT) net> wrote:

Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:

28 Apr 2006 22:41:33 GMT from <phil-news-nospam (AT) ipal (DOT) net>:
I have a table with 3 columns in 1 row. I want to increase the spacing
_between_ the columns (gutter) _without_ increasing the spacing between
those columns and the table itself. Is there a way to do that in CSS
without having to code in extra dummy columns in HTML to create gutters?

I'm sure there is, but I don't understand your question.

The columns are _part_of_ the table, no? Then what do you mean by
"spacing between those columns and the table" -- how can there be
space between a thing and part of itself?

I would guess he means to increase the spacing between the borders of
cells of adjacent columns, but between the borders of the cells in the
outermost columns and the borders of the table.

Going across the row:
table border - border-spacing - cell - border-spacing - cell -
border-spacing - cell - border-spacing - table border

So the objective is to have different values for the outer two lots of
border-spacing than for the inner two.

As the border-spacing property is set for the whole table this isn't
easily done with CSS.

I had been trying to do it with the marging setting and that was not having
any effect. However, I tried it with the padding setting and it seems to
be working now.

td { padding-left: 24px; }
td:first-child { padding-left: 0px; }

But I still need to find a way to sequeeze the extra space off the edges
of the table. HTML seems to force 2 pixels there unless I do cellspacing=0
in the HTML on the table element.

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

phil-news-nospam (AT) ipal (DOT) net wrote:

On Sat, 29 Apr 2006 13:06:13 +0100 Steve Pugh <steve (AT) pugh (DOT) net> wrote:
| Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:
|
|>28 Apr 2006 22:41:33 GMT from <phil-news-nospam (AT) ipal (DOT) net>:
|>> I have a table with 3 columns in 1 row. I want to increase the spacing
|>> _between_ the columns (gutter) _without_ increasing the spacing between
|>> those columns and the table itself. Is there a way to do that in CSS
|>> without having to code in extra dummy columns in HTML to create gutters?
|
|>I'm sure there is, but I don't understand your question.
|
|>The columns are _part_of_ the table, no? Then what do you mean by
|>"spacing between those columns and the table" -- how can there be
|>space between a thing and part of itself?
|
| I would guess he means to increase the spacing between the borders of
| cells of adjacent columns, but between the borders of the cells in the
| outermost columns and the borders of the table.
|
| Going across the row:
| table border - border-spacing - cell - border-spacing - cell -
| border-spacing - cell - border-spacing - table border
|
| So the objective is to have different values for the outer two lots of
| border-spacing than for the inner two.
|
| As the border-spacing property is set for the whole table this isn't
| easily done with CSS.

I had been trying to do it with the marging setting and that was not having
any effect.

Table cells don't have margins.

However, I tried it with the padding setting and it seems to
be working now.

Ah. I assumed that you had visible borders on your table cells and
wanted the space between the borders (i.e. the CSS border-spacing
property) to be variable. IF you have no borders then padding will
allow you to do everything you want.

td { padding-left: 24px; }
td:first-child { padding-left: 0px; }

You'll need to add a class to the first cell to cope with IE's
non-support of the :first-child pseudoclass.

But I still need to find a way to sequeeze the extra space off the edges
of the table. HTML seems to force 2 pixels there unless I do cellspacing=0
in the HTML on the table element.

That would be the browser's default cellpadding/border-spacing (the
two are largely analogous). Setting it to zero in CSS in IE is done by
setting border-collapse: collapse (yes even if you have no borders).
Setting it to non zero values in CSS in IE is trickier.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

On Sun, 30 Apr 2006 11:08:12 +0100 Steve Pugh <steve (AT) pugh (DOT) net> wrote:

phil-news-nospam (AT) ipal (DOT) net wrote:

On Sat, 29 Apr 2006 13:06:13 +0100 Steve Pugh <steve (AT) pugh (DOT) net> wrote:
| Stan Brown <the_stan_brown (AT) fastmail (DOT) fm> wrote:
|
|>28 Apr 2006 22:41:33 GMT from <phil-news-nospam (AT) ipal (DOT) net>:
|>> I have a table with 3 columns in 1 row. I want to increase the spacing
|>> _between_ the columns (gutter) _without_ increasing the spacing between
|>> those columns and the table itself. Is there a way to do that in CSS
|>> without having to code in extra dummy columns in HTML to create gutters?
|
|>I'm sure there is, but I don't understand your question.
|
|>The columns are _part_of_ the table, no? Then what do you mean by
|>"spacing between those columns and the table" -- how can there be
|>space between a thing and part of itself?
|
| I would guess he means to increase the spacing between the borders of
| cells of adjacent columns, but between the borders of the cells in the
| outermost columns and the borders of the table.
|
| Going across the row:
| table border - border-spacing - cell - border-spacing - cell -
| border-spacing - cell - border-spacing - table border
|
| So the objective is to have different values for the outer two lots of
| border-spacing than for the inner two.
|
| As the border-spacing property is set for the whole table this isn't
| easily done with CSS.

I had been trying to do it with the marging setting and that was not having
any effect.

Table cells don't have margins.

No, but it would have been a way to do it if they had.

However, I tried it with the padding setting and it seems to
be working now.

Ah. I assumed that you had visible borders on your table cells and
wanted the space between the borders (i.e. the CSS border-spacing
property) to be variable. IF you have no borders then padding will
allow you to do everything you want.

td { padding-left: 24px; }
td:first-child { padding-left: 0px; }

You'll need to add a class to the first cell to cope with IE's
non-support of the :first-child pseudoclass.

I'm not going to worry about IE. I'll include a "Get Firefox" Icon/link.

But I still need to find a way to sequeeze the extra space off the edges
of the table. HTML seems to force 2 pixels there unless I do cellspacing=0
in the HTML on the table element.

That would be the browser's default cellpadding/border-spacing (the
two are largely analogous). Setting it to zero in CSS in IE is done by
setting border-collapse: collapse (yes even if you have no borders).
Setting it to non zero values in CSS in IE is trickier.

And Firefox? Or are you just doing IE?

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

phil-news-nospam (AT) ipal (DOT) net wrote:

On Sun, 30 Apr 2006 11:08:12 +0100 Steve Pugh <steve (AT) pugh (DOT) net> wrote:
| phil-news-nospam (AT) ipal (DOT) net wrote:
|
|>td { padding-left: 24px; }
|>td:first-child { padding-left: 0px; }
|
| You'll need to add a class to the first cell to cope with IE's
| non-support of the :first-child pseudoclass.

I'm not going to worry about IE. I'll include a "Get Firefox" Icon/link.

Or just let IE users have a slightly different presentation (not as
good in your eyes but as no one else is likely to see it in more than
one browser, probably no one else will notice or care). Get Browser X
buttons are generally a waste of space and effort.

|>But I still need to find a way to sequeeze the extra space off the edges
|>of the table. HTML seems to force 2 pixels there unless I do cellspacing=0
|>in the HTML on the table element.
|
| That would be the browser's default cellpadding/border-spacing (the
| two are largely analogous). Setting it to zero in CSS in IE is done by
| setting border-collapse: collapse (yes even if you have no borders).
| Setting it to non zero values in CSS in IE is trickier.

And Firefox? Or are you just doing IE?

FireFox, Opera, Safari, etc., etc. support border-spacing and hence
don't need extra mollycoddling.

In your case border-collapse: collapse will suffice for all browsers
as that automatically sets border-spacing to zero.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>