Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: space in table

  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    space in table

    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.

  • #2
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    843
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Here are links to the best resources available, which will teach you how to use CSS really effectively.

    http://www.htmlcodetutorial.com/help...tml&highlight=
    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.../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...rds/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/refere...eatsheet.html: CSS Cheat Sheet
    http://www.blooberry.com/indexdot/cs...index/all.htm: CSS Property Index
    http://reference.sitepoint.com/css: Sitepoint CSS Reference
    http://boogiejack.com/intro_to_CSS.html

    http://www.westciv.com/style_master/...al/index.html: WestCiv CSS Tutorial Section
    ☠ ☠RON☠ ☠

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    843
    Thanks
    11
    Thanked 79 Times in 77 Posts

    Thumbs up

    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

    ☠ ☠RON☠ ☠


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •