
July 20th, 2005, 10:27 PM
| | | Spacing table rows
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 | 
July 20th, 2005, 10:27 PM
| | | Re: Spacing table rows
Rick DeBay wrote:[color=blue]
> 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.[/color]
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.
[color=blue]
> Thanks, Rick DeBay
>[/color]
--
Anne van Kesteren
<http://www.annevankesteren.nl/> | 
July 20th, 2005, 10:27 PM
| | | Re: Spacing table rows
In article <buv74n$nip$1@reader10.wxs.nl>, Anne van Kesteren says...[color=blue]
>
>Rick DeBay wrote:[color=green]
>> 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.[/color]
>
>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.
>[color=green]
>> Thanks, Rick DeBay
>>[/color]
>--
> Anne van Kesteren
> <http://www.annevankesteren.nl/>[/color]
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 | 
July 20th, 2005, 10:28 PM
| | | Re: Spacing table rows
In article <HUQQb.148649$na.246227@attbi_s04>, Brian says...[color=blue]
>
>Rick DeBay wrote:[color=green]
>> I'm trying to create a layout table,[/color]
>
>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/[/color]
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 | 
July 20th, 2005, 10:28 PM
| | | Re: Spacing table rows
Rick DeBay wrote:
[color=blue]
> In article <HUQQb.148649$na.246227@attbi_s04>, Brian says...
>[color=green]
>>Rick DeBay wrote:
>>[color=darkred]
>>>I'm trying to create a layout table,[/color]
>>
>>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/[/color]
>
>
> Thanks for the reply, but it doesn't help my situation.[/color]
Then maybe it's time to explain your webpage situation preferably along
with an url.
[color=blue]
> As far as proper HTML, all my pages validate. A CSS only layout wouldn't work
> on all browsers,[/color]
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.
[color=blue]
> So, does anyone know how to vary row spacing within a table?
>
> Rick DeBay
>[/color]
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 | 
July 20th, 2005, 10:29 PM
| | | Re: Spacing table rows
In article <bv1r55$ph2$1@news.eusc.inter.net>, DU says...[color=blue]
>
>Rick DeBay wrote:[color=green]
>> Thanks for the reply, but it doesn't help my situation.[/color]
>
>Then maybe it's time to explain your webpage situation preferably along
>with an url.
>[color=green]
>>As far as proper HTML, all my pages validate. A CSS only layout wouldn't work
>> on all browsers,[/color]
>
>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.
>[color=green]
>> So, does anyone know how to vary row spacing within a table?
>>
>> Rick DeBay
>>[/color]
>
>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[/color]
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. | 
July 20th, 2005, 10:29 PM
| | | Re: Spacing table rows
Rick DeBay <Rick_member@newsguy.com> wrote:
[color=blue]
>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[/color]
Yes there is. <tbody>.
You can have multiple tbody elements in a table and that's how you
group rows together.
[color=blue]
>but if I can space the groups there will be a visual grouping.[/color]
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.
[color=blue]
>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.[/color]
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 <steve@pugh.net> <http://steve.pugh.net/> | 
July 20th, 2005, 10:30 PM
| | | Re: Spacing table rows
In article <mdrf10pi7pfc2uu8rj2sqjqaijfp7fmgea@4ax.com>, Steve Pugh says...[color=blue]
>
>Rick DeBay <Rick_member@newsguy.com> wrote:
>[color=green]
>>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[/color]
>
>Yes there is. <tbody>.
>
>You can have multiple tbody elements in a table and that's how you
>group rows together.
>[color=green]
>>but if I can space the groups there will be a visual grouping.[/color]
>
>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.
>[color=green]
>>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.[/color]
>
>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 <steve@pugh.net> <http://steve.pugh.net/>[/color]
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. | 
July 20th, 2005, 10:32 PM
| | | Re: Spacing table rows
In article Rick DeBay wrote:
[color=blue]
> 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.[/color]
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. | 
July 20th, 2005, 10:34 PM
| | | Re: Spacing table rows
In article <MPG.1a8710d6cbb208e4989e29@news.cis.dfn.de>, Lauri Raittila says...[color=blue]
>
>In article Rick DeBay wrote:
>[color=green]
>> 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.[/color]
>
>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.[/color]
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 | 
July 20th, 2005, 10:34 PM
| | | Re: Spacing table rows
In article Rick DeBay wrote:
[color=blue]
> In article <MPG.1a8710d6cbb208e4989e29@news.cis.dfn.de>, Lauri Raittila:[color=green]
> >tbody tr:first-child td {padding-top:1em;} /* and of course not working
> >in IE, for it a class in tr should do it.*/[/color][/color]
[color=blue]
> 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,[/color]
It should only add padding to each cell in first row of tbody. Probably
bug.
[color=blue]
> not just the first row of the tbody. And the workaround for IE isn't
> working for Mozilla. :-([/color]
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. | 
July 20th, 2005, 10:34 PM
| | | Re: Spacing table rows
In article <MPG.1a890988330d58c989e44@news.cis.dfn.de>, Lauri Raittila says...[color=blue]
>
>In article Rick DeBay wrote:
>[color=green]
>> In article <MPG.1a8710d6cbb208e4989e29@news.cis.dfn.de>, Lauri Raittila:[color=darkred]
>> >tbody tr:first-child td {padding-top:1em;} /* and of course not working
>> >in IE, for it a class in tr should do it.*/[/color][/color]
>[color=green]
>> 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,[/color]
>
>It should only add padding to each cell in first row of tbody. Probably
>bug.
>[color=green]
>> not just the first row of the tbody. And the workaround for IE isn't
>> working for Mozilla. :-([/color]
>
>tr.ie-listing-top td {padding-top:10em;} ?[/color]
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.
[color=blue]
>--
>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.[/color] |
Posting Rules
| You may not post new threads You may not post replies You may not post attachments You may not edit your posts HTML code is Off | | | | | | What is Bytes?
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over network members.
|