space in table

sylviel · 11-09-2010, 12:18 AM

Hello,

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) ?

Thanks

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

Chris Hick · 11-09-2010, 05: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:
css:

Code:

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

html

Code:

<table class="space">
    <tr>    
        <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>
    </tr>
    <tr>
        <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>
    </tr>
</table>

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

sylviel · 11-09-2010, 01: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, 01:56 PM

teedoff · 11-09-2010, 02: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, 07: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/co...-tables-to-css
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Ima...ysterious_Gaps

Choosing Dimensions for Your Web Page Layout:

http://www.elated.com/articles/choos...b-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