473,840 Members | 1,631 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

Jul 20 '05 #1
12 39128
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.htm l>. Disadvantage
is that a HTML attribute was needed.
Thanks, Rick DeBay

--
Anne van Kesteren
<http://www.annevankest eren.nl/>
Jul 20 '05 #2
In article <bu**********@r eader10.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.htm l>. Disadvantage
is that a HTML attribute was needed.
Thanks, Rick DeBay

--
Anne van Kesteren
<http://www.annevankest eren.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

Jul 20 '05 #3
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/

Jul 20 '05 #4
In article <HUQQb.148649$n a.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

Jul 20 '05 #5
DU
Rick DeBay wrote:
In article <HUQQb.148649$n a.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
Jul 20 '05 #6
In article <bv**********@n ews.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.

Jul 20 '05 #7
Rick DeBay <Ri*********@ne wsguy.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/>
Jul 20 '05 #8
In article <md************ *************** *****@4ax.com>, Steve Pugh says...

Rick DeBay <Ri*********@ne wsguy.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.

Jul 20 '05 #9
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.

Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
5931
by: Brian Tremblay | last post by:
An artist has a catalogue of her work in 3 tables, url < http://www.julietremblay.com/test/portfolio/catalogue.html > (valid html 4.01 strict) She wants the table head to be white on blue, and the data cells to have a white background like the rest of the page. (The cells contain links; thus, they should be gold on white.) She also wants borders around the table and between rows, but not between cells.
19
17613
by: CMAR | last post by:
I have the following markup. The problem is that the browser, e.g., IE6, inserts several lines of blank space between the <div> and the following table. Is there a way to minimize that vertical spacing? Thanks, CMA <div class="vlgray">Condition</div> <table cellpadding="0" cellspacing="0">
4
16880
by: Bernd Goldschmidt | last post by:
Hi. I've got a somewhat wired problems with an extra space between table rows in Mozilla and Opera (IE works fine). With the code below, cells within a row align seamlessly, but there is a space of about 5px between table rows. Any Idea?
12
2224
by: Sebastien B. | last post by:
I'm wondering if it's at all possible to have spacing between a table's cells, and only between the cells, not between the outter cells and the table's border. See end of message for an example (make sure to view this in fixed width font). I've played around with different things, such as margin-right, etc. but I didn't get any results. Would this be even possible. I would have thought the specs (either HTML or CSS) would have allowed...
12
20882
by: Jon | last post by:
Viewing the code below in IE displays spacing between the rows. I'm specifying no borders or spacing, and there's no disjointing in Mozilla. What else is there? I want to join the rows. <table border="0" cellspacing='0' cellpadding='0' width="720" cols="2"> <tr> <td colspan="2"> <a href="index.html">
3
2201
by: JBH | last post by:
I'm having difficulty removing spacing between two rows in a table. Below is a copy of my source code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>About Isadore Gallery</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="keywords" content="history of Isadore Gallery, about
2
1647
by: Greg Linwood | last post by:
I'm using a Data Grid and want to apply wider spacing between columns than rows. As such, cellspacing / padding aren't any use to me. I used to do this in html tables by simply adding columns with a single point transparent .gif, set to a specific .pt width. This worked very well for precise alignment. I can't find an easy way to do this using a DataGrid. It is possible for me to add columns (I'm doing this at run-time) but the darned...
3
2096
by: Selden McCabe | last post by:
Sometimes I want to put a table inside a cell of another table (say, to create 3 equal divisions, etc.). When I want the inner table's edges to correspond exactly with the edges of the cell, I set the border (top, left, bottom, right) to zero for both the inner table and outer table. Also padding to 0 and spacing to 0. But, for some reason, there is still some space between the bottom of the inner table and the bottom of the containing...
10
11069
by: phil-news-nospam | last post by:
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/ ...
0
9863
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10607
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10665
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9444
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7845
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7023
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5686
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
4080
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3139
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.