Spacing table rows

[Rick DeBay]

I'm trying to create a layout table, where the spacing between rows varies.
I've tried using setting margin-top and border-top for the rows I wan't spaced
down from the one above, and I've also tried setting it on all of the cells of
that row.

This hasn't worked, so I was wondering if anyone knew how it could be done.

Thanks, Rick DeBay

[Anne van Kesteren]

Rick DeBay wrote:

I'm trying to create a layout table, where the spacing between rows varies.
I've tried using setting margin-top and border-top for the rows I wan't spaced
down from the one above, and I've also tried setting it on all of the cells of
that row.
Simple example:
<http://annevankesteren.nl/test/examples/tweakers/post-855071.htm>

Simple hacked example from somebody else, which should work in IE:
<http://www.xs4all.nl/~peterned/examples/borderspace.html>. Disadvantage
is that a HTML attribute was needed.
Thanks, Rick DeBay

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

[Rick DeBay]

In article <bu**********@reader10.wxs.nl>, Anne van Kesteren says...

Rick DeBay wrote:

I'm trying to create a layout table, where the spacing between rows varies.
I've tried using setting margin-top and border-top for the rows I wan't spaced
down from the one above, and I've also tried setting it on all of the cells of
that row.

Simple example:
<http://annevankesteren.nl/test/examples/tweakers/post-855071.htm>

Simple hacked example from somebody else, which should work in IE:
<http://www.xs4all.nl/~peterned/examples/borderspace.html>. Disadvantage
is that a HTML attribute was needed.

Thanks, Rick DeBay

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

Actually, I'd like to vary the spacing between rows. So I took your example and
added styles directly to the elements to test. Changing the row didn't do
anything, nor did adding the style to the cells.

Modified snippet from post-855071.htm:

<tr style="border-spacing:0 50px;">
<td class="l" style="border-spacing:0 50px;">Artikel 2</td>
<td class="r" style="border-spacing:0 50px;"><a href="">view</a> <a
href="">retract</a> <a href="">archive</a></td>
</tr>

Rick DeBay

[Brian]

Rick DeBay wrote:

I'm trying to create a layout table,

Instead, use proper html. And do the layout in css.

http://www.allmyfaqs.com/faq.pl?Tableless_layouts

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

[Rick DeBay]

In article <HUQQb.148649$na.246227@attbi_s04>, Brian says...

Rick DeBay wrote:

I'm trying to create a layout table,

Instead, use proper html. And do the layout in css.

http://www.allmyfaqs.com/faq.pl?Tableless_layouts

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Thanks for the reply, but it doesn't help my situation.
As far as proper HTML, all my pages validate. A CSS only layout wouldn't work
on all browsers, and I don't know how you'd make it work with Tiles.
So, does anyone know how to vary row spacing within a table?

Rick DeBay

[DU]

Rick DeBay wrote:

In article <HUQQb.148649$na.246227@attbi_s04>, Brian says...

Rick DeBay wrote:

I'm trying to create a layout table,
Instead, use proper html. And do the layout in css.

http://www.allmyfaqs.com/faq.pl?Tableless_layouts

--
Brian (follow directions in my address to email me)
http://www.tsmchughs.com/

Thanks for the reply, but it doesn't help my situation.

Then maybe it's time to explain your webpage situation preferably along
with an url.
As far as proper HTML, all my pages validate. A CSS only layout wouldn't work
on all browsers,
Ok, so can you identify the browsers and browser versions you're looking
to support? I hope you're not looking to support browsers which were
designed more than 6 years ago like NS 4, right?

and I don't know how you'd make it work with Tiles.

No one can see what layout you are actually trying to achieve.
So, does anyone know how to vary row spacing within a table?

Rick DeBay

I would say the answer provided by Anne was complete and correct. Adding
a css declaration of border-spacing in all <td>s on top of the css
declaration of border-spacing for the <tr> like you did does not seem to
make sense in my mind.
cellspacing is a valid attribute for table, even in XHTML 1.0 strict
(even in XHTML 1.1) and cellspacing is very well supported in a wide
majority of browsers.

If you're trying to create a layout table where the spacing between rows
varies, then I would suspect you're not using a table to render tabular
data to begin with. I too would suggest you to drop table design for
your layout and use more adequate and proper HTML elements to achieve
whatever (layout?) you are trying to achieve.

DU

[Rick DeBay]

In article <bv**********@news.eusc.inter.net>, DU says...

Rick DeBay wrote:

Thanks for the reply, but it doesn't help my situation.

Then maybe it's time to explain your webpage situation preferably along
with an url.

As far as proper HTML, all my pages validate. A CSS only layout wouldn't work
on all browsers,

Ok, so can you identify the browsers and browser versions you're looking
to support? I hope you're not looking to support browsers which were
designed more than 6 years ago like NS 4, right?

and I don't know how you'd make it work with Tiles.

No one can see what layout you are actually trying to achieve.

So, does anyone know how to vary row spacing within a table?

Rick DeBay

I would say the answer provided by Anne was complete and correct. Adding
a css declaration of border-spacing in all <td>s on top of the css
declaration of border-spacing for the <tr> like you did does not seem to
make sense in my mind.
cellspacing is a valid attribute for table, even in XHTML 1.0 strict
(even in XHTML 1.1) and cellspacing is very well supported in a wide
majority of browsers.

If you're trying to create a layout table where the spacing between rows
varies, then I would suspect you're not using a table to render tabular
data to begin with. I too would suggest you to drop table design for
your layout and use more adequate and proper HTML elements to achieve
whatever (layout?) you are trying to achieve.

DU

Actually, it is tabular data, arranged in rows and columns. I've already got
the columns grouped logically (using colgroups) and visually (by coloring
borders between different groups), and need to group the rows. There is no
logical row grouping in HTML as with colgroup (no, TH, headers, nor axis won't
work for this), but if I can space the groups there will be a visual grouping.
The HTML snippet I replied to Anne with showed that setting a different cell
spacing for one row doesn't work in Mozilla 1.6 nor IE 6.0 if you set the style
on all the cells in the row, or on the row and hope the cells inherit it. I've
also tried setting the top margin and border without success.

[Steve Pugh]

Rick DeBay <Ri*********@newsguy.com> wrote:

Actually, it is tabular data, arranged in rows and columns. I've already got
the columns grouped logically (using colgroups) and visually (by coloring
borders between different groups), and need to group the rows. There is no
logical row grouping in HTML as with colgroup
Yes there is. <tbody>.

You can have multiple tbody elements in a table and that's how you
group rows together.
but if I can space the groups there will be a visual grouping.
I'm not sure whether applying CSS margins to tbody will work, but I
doubt it.

You can set borders (including transparent borders) on tbody elements,
but (a) doesn't work at all in IE and (b) works in Mozilla and Opera
but only if border-collapse is set to collapse for the table.
The HTML snippet I replied to Anne with showed that setting a different cell
spacing for one row doesn't work in Mozilla 1.6 nor IE 6.0 if you set the style
on all the cells in the row, or on the row and hope the cells inherit it. I've
also tried setting the top margin and border without success.

The HTML cellspacing and CSS border-spacing only apply to tables as a
whole.

Table rows and cells don't have margins.

Borders can be set on cells, rows or row-groups (i.e. <td> and <th>,
<tr>, <tbody> elements)
However, you need to carefully read
http://www.w3.org/TR/CSS2/tables.html#borders and take note of the
section on collapsing borders and border conflict resolution.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Rick DeBay]

In article <md********************************@4ax.com>, Steve Pugh says...

Rick DeBay <Ri*********@newsguy.com> wrote:

Actually, it is tabular data, arranged in rows and columns. I've already got
the columns grouped logically (using colgroups) and visually (by coloring
borders between different groups), and need to group the rows. There is no
logical row grouping in HTML as with colgroup

Yes there is. <tbody>.

You can have multiple tbody elements in a table and that's how you
group rows together.

but if I can space the groups there will be a visual grouping.

I'm not sure whether applying CSS margins to tbody will work, but I
doubt it.

You can set borders (including transparent borders) on tbody elements,
but (a) doesn't work at all in IE and (b) works in Mozilla and Opera
but only if border-collapse is set to collapse for the table.

The HTML snippet I replied to Anne with showed that setting a different cell
spacing for one row doesn't work in Mozilla 1.6 nor IE 6.0 if you set the style
on all the cells in the row, or on the row and hope the cells inherit it. I've
also tried setting the top margin and border without success.

The HTML cellspacing and CSS border-spacing only apply to tables as a
whole.

Table rows and cells don't have margins.

Borders can be set on cells, rows or row-groups (i.e. <td> and <th>,
<tr>, <tbody> elements)
However, you need to carefully read
http://www.w3.org/TR/CSS2/tables.html#borders and take note of the
section on collapsing borders and border conflict resolution.

Steve

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

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

You can have more than one tbody? Thanks, I'll use it.
I tried setting margin-top: 50px for tbody, and I couldn't see any change. I
guess I'll have to use an empty row in order to space between them.

[Lauri Raittila]

In article Rick DeBay wrote:

You can have more than one tbody? Thanks, I'll use it.
I tried setting margin-top: 50px for tbody, and I couldn't see any change. I
guess I'll have to use an empty row in order to space between them.

tbody tr:first-child td {padding-top:1em;} /* and of course not working
in IE, for it a class in tr should do it.*/

Unfortunately, it comes very tricky, if you are using collapsing border
modell and visible borders, as you need to change to separate modell...

Anyway, if you want space between rowgroups, that often means that
<tr><td colspan=0 scope=rowgroup>Heading of rowgroup
is good idea.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Rick DeBay]

In article <MP************************@news.cis.dfn.de>, Lauri Raittila says...

In article Rick DeBay wrote:

You can have more than one tbody? Thanks, I'll use it.
I tried setting margin-top: 50px for tbody, and I couldn't see any change. I
guess I'll have to use an empty row in order to space between them.

tbody tr:first-child td {padding-top:1em;} /* and of course not working
in IE, for it a class in tr should do it.*/

Unfortunately, it comes very tricky, if you are using collapsing border
modell and visible borders, as you need to change to separate modell...

Anyway, if you want space between rowgroups, that often means that
<tr><td colspan=0 scope=rowgroup>Heading of rowgroup
is good idea.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Thanks. It works for IE (tr.ie-listing-top { padding-top: 10em; }) but tbody
tr:first-child td {padding-top:1em;} causes Mozilla to add the padding to every
cell, not just the first row of the tbody. And the workaround for IE isn't
working for Mozilla. :-(

Rick DeBay

[Lauri Raittila]

In article Rick DeBay wrote:

In article <MP************************@news.cis.dfn.de>, Lauri Raittila:

tbody tr:first-child td {padding-top:1em;} /* and of course not working
in IE, for it a class in tr should do it.*/

Thanks. It works for IE (tr.ie-listing-top { padding-top: 10em; }) but tbody
tr:first-child td {padding-top:1em;} causes Mozilla to add the padding to
every cell,
It should only add padding to each cell in first row of tbody. Probably
bug.
not just the first row of the tbody. And the workaround for IE isn't
working for Mozilla. :-(

tr.ie-listing-top td {padding-top:10em;} ?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Rick DeBay]

In article <MP***********************@news.cis.dfn.de>, Lauri Raittila says...

In article Rick DeBay wrote:

In article <MP************************@news.cis.dfn.de>, Lauri Raittila:

>tbody tr:first-child td {padding-top:1em;} /* and of course not working
>in IE, for it a class in tr should do it.*/

Thanks. It works for IE (tr.ie-listing-top { padding-top: 10em; }) but tbody
tr:first-child td {padding-top:1em;} causes Mozilla to add the padding to
every cell,

It should only add padding to each cell in first row of tbody. Probably
bug.

not just the first row of the tbody. And the workaround for IE isn't
working for Mozilla. :-(

tr.ie-listing-top td {padding-top:10em;} ?

That line of my CSS file only works in IE. I used 10em to make sure I could see
the difference when I was checking if it worked.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.