View Full Version : space in table

11-09-2010, 01:18 AM

I'm doing my cv in a table (yes I know it's not great but it does exactly what I want up to this point) : I can't define the space between column and rows as I want :
I wan't to have some space between my columns (let's say 8px), and be able to change the space between rows.

Now I'm using cell-spacing in table, which do the trick for the columns, and was quite good for the rows. However some time I would like less space between row.

I tried margin, but it seems it doesn't work on <td> or <tr>.
I tried invisible border but I can't make them negative to reduce the space.

Any ideas (except not using table) ?


P.S : I'm using xhtml 1.0, css, in firefox and trying to be W3C compliant.

Chris Hick
11-09-2010, 06:02 AM
Have you tried the CSS border-spacing?

With CSS border-spacing you can change the spacing between the rows and the columns of your table. ^_^

something like this..
this is just going to be a sample:

<style type="text/css">
table.space {
border: outset 5pt;
border-spacing: 30px 15px;
td {
border: inset 5pt;


<table class="space">
<td>This table is styled using the CSS border-spacing property. Note that two values were provided - one for horizontal border-spacing and one for vertical border-spacing. Try changing the value to see the effect it has on the border. The effect is similar to the HTML cellspacing property.</td>
<td><b>Note:</b> If this is not working, it could be a browser compatibility issue - at the time of writing, browser support for the border-spacing property was limited . <p>border-spacing refers to the white space in between the table outset and the td inset.</p></td>

Let me know if this is not what you are looking for.

11-09-2010, 02:16 PM
Yes thanks a lot ! By the time I had come around with padding in <td>, but this is better.

By the way, where can one find all the css argument you can give to one html object ? I haven't found it on w3c...

Major Payne
11-09-2010, 02:56 PM
Here are links to the best resources available, which will teach you how to use CSS really effectively.

http://www.w3schools.com/css/: W3Schools CSS Tutorial Section
http://www.htmldog.com/guides/cssbeginner/: HTMLDog – CSS Tutorial Section
http://css-tricks.com/: CSS-Tricks Tutorials, Articles And Screencasts
http://video.google.co.uk/videosearch?q=css+tutorial: Google Videos – CSS

http://www.alistapart.com/topics/code/css/: A List Apart - CSS Tutorial Section
http://www.richinstyle.com/guides/introduction1.html: RichInStyle CSS Tutorial Section
http://www.htmlgoodies.com/beyond/css/index.php: HTMLGoodies CSS Tutorial Section
http://css-discuss.incutio.com/: CSS-Discuss Wiki Tutorial Section
http://www.positioniseverything.net/: Positioning Is Everything
http://www.barelyfitz.com/screencast/html-training/css/positioning/: Learn CSS Positioning in Ten Steps

http://www.456bereastreet.com/lab/: 456BereaStreet: The CSS, HTML, and JavaScript Lab
http://www.cssbasics.com/: CSSBasics Tutorials
http://www.cssplay.co.uk/menu/: CSS-Play - List of Demonstrations
http://www.tizag.com/cssT/: Tizag CSS Tutorial Section
http://artypapers.com/csshelppile/: CSS Help Pile
http://dezwozhere.com/links.html: Holy CSS Zeldman! - CSS, Accessibility and Standards Links

http://meyerweb.com/eric/css/: Eric Meyer : CSS Section
http://www.andybudd.com/links/cssweb_standards/index.php: Andy Budd Links
http://csszengarden.com/: CSS Zen Garden
http://delicious.com/tag/css: Delicious CSS Tag
http://css.maxdesign.com.au/index.htm: MaxDesign CSS Tutorial And Resource Site
http://www.csseasy.com/: CSSEasy Tutorial And Resource Site

http://www.echoecho.com/css.htm: EchoEcho CSS Tutorial Section
http://www.css-discuss.org/: CSS-Discuss Information
http://webdesignfromscratch.com/html-css/css.php: Web Design From Scratch
http://www.csstutorial.net/: CSS-Tutorial
http://cssdog.com/index.html: CSS Dog Resources And References
http://www.alvit.de/handbook/: Web Developer's Handbook

http://cssdocs.org/: CSSDocs CSS Properties
http://www.css3.com/: CSS 3 reference guide, tutorials, and blog
http://lesliefranke.com/files/reference/csscheatsheet.html: CSS Cheat Sheet
http://www.blooberry.com/indexdot/css/propindex/all.htm: CSS Property Index
http://reference.sitepoint.com/css: Sitepoint CSS Reference

http://www.westciv.com/style_master/academy/css_tutorial/index.html: WestCiv CSS Tutorial Section

11-09-2010, 03:00 PM
And althought you have admitted tables are not the best way, I will say again. You are already seeing some limitations in the use of tables for layouts. I'm sure you will run into more problems on down the road. Might I ask why you didn't want to use divs for your layout? Much more flexibility. You're able to control the placement of each individual div, whereas with a table each column/row is locked and dependant on the other columns/rows.

Major Payne
11-09-2010, 08:06 PM
More help:

Tableless Web Design: http://en.wikipedia.org/wiki/Tableless_web_design
Why tables for layout is stupid: http://www.hotdesign.com/seybold/
How to convert manually your HTML tables to CSS: http://www.table2css.com/articles/convert-your-html-tables-to-css
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Choosing Dimensions for Your Web Page Layout:

How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/

Care With Font Size: http://www.w3.org/QA/Tips/font-size

Why Validate?: http://validator.w3.org/docs/why.html
CSS Validator: http://jigsaw.w3.org/css-validator/
HTML Validator: http://validator.w3.org/#validate_by_uri+with_options