SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cellpadding, Cellspacing, and Border

    Is there a good way to use classes to determine cellpadding, cellspacing, and border of a table? I can only seem to do cellpadding and border on cells, and haven't even found a way to do cellspacing.

    I'm going for the optimum XHTML/CSS combination.

    Thanks!

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't believe that you can set spacing using CSS. But, the correllary would be like so:

    border = border
    spacing = margin
    padding = padding
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All three must be applied to <td>, though, correct? Not <table>,

  4. #4
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by geiger
    All three must be applied to <td>, though, correct? Not <table>,
    No, I believe those can be added to table. Right? Are you looking for "will it work?" or "is that XHTML valid?"
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  5. #5
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, CSS is always going to be XHTML valid. My point is, they don't all work on table. Here's the setup I used.

    CSS:
    table= width 100%
    td= cellpadding 5

    XHTML
    <table cellspacing="1" border="0">
    <td>

    I did this because neither border or cellspacing woudl work with table. They don't produce the desired effects. And if you use them with td, they don't have the same effect.

    That all works, right? Seems like the best solution. BTW it's a little more complicated than I showed but that's the basics of what I did. There _is_ a reason I wanted it CSS'd :P

  6. #6
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I got this to work on Mozilla, Micro$oft doesn't seem to understand the "border-spacing" then again my CSS is a little chaotic - sloppy - but you might like to try displaying the following in Mozilla.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>CSS Table Spacing</title>
    <style type="text/css">
    <!--
    table {
     width : 100%; 
     border : 1px solid red; 
     border-spacing : 50px; 
     padding : 25px; 
    } 
    td {
     padding : 10px; 
     color : green; 
     border : 1px solid blue; 
    } 
    -->
    </style>
      </head>
      <body>
        <table>
          <tr>
            <td>A</td>
            <td>B</td>
          </tr>
          <tr>
            <td>X</td>
            <td>Y</td>
          </tr>
        </table>
      </body>
    </html>
    Last edited by xhtmlcoder; Nov 21, 2002 at 09:33.

  7. #7
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's border spacing? Also, I couldn't get spacing or border to work on IE, and it has to be cross-browser compatable.

    I think I'll stick with what I have. Thanks.

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    That's strange because I was also running Micro$oft IE 6.0 and could get the table border to work.

    The 'border-spacing' property specifies the distance between the borders of adjacent cells. This space is filled with the background of the table element.

  9. #9
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As has been said, the appropriate CSS would use border(-left | -right | -top | -bottom), margin(-left | -right | -top | -bottom), and padding(-left | -right | -top | -bottom). There is no valid border-spacing attrbiute.

    Aaron
    Aaron Brazell
    Technosailor



  10. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Perhaps, I just misread the Technical Recommendations: http://www.w3.org/TR/REC-CSS2/tables...arated-borders which is possible

  11. #11
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sketch
    As has been said, the appropriate CSS would use border(-left | -right | -top | -bottom), margin(-left | -right | -top | -bottom), and padding(-left | -right | -top | -bottom). There is no valid border-spacing attrbiute.

    Aaron
    tsk tsk.. its valid, only IE doesnt support it which means its next to useless at present.

  12. #12
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can specify everything without -direction, and that works too, supposidely.

    The thing is, IE doesn't pay attention to directions like that on spacing, etc.

    So is my way the best solution? I believe it is.

  13. #13
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know that you're quite grasping what's being said here, geiger.

    there is no standard cross-platform CSS using spacing anything. Your best bet is with margins. So if you want to create a 3px space between cells then define your css like this:
    Code:
    <style type="text/css">
      td { margins: 3px; }
      table { padding: 3px; }
    </style>
    You can do it your way too, but if you're looking for CSS recommendations, that's it...

    Aaron
    Aaron Brazell
    Technosailor



  14. #14
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know what's been said. If you looked what my aim here was, I think I found the best solution. I want a 1 px space between each cell, however if I set the margins to 1 px that actually creates 2 px (or at least the equivalent of 2 cellspacing).

    To achieve the desired effect, I can only use CSS to make cellpadding in each td.

  15. #15
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alright whatever suits you. I notice you like to ask questions and then snub the people who give you answers in favor of your own....something like

    "help me please."

    "Ok do this..."

    "No, my answer works, so I don't need you or your time thankyouverymuch."

    I'm sure I'm reading you wrong...but then this comes from many "please help me" conversations you and I have had over the months...

    Aaron
    Aaron Brazell
    Technosailor



  16. #16
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Damnit, Sketch, don't insult me like that. I came here and asked a question. I don't believe anyone could give an answer to the main question of whether or not you could simulate cellspacing with CSS, so I said my way must be best.

    You people said that you can use cell margins to produce the effect of cellspacing. Well, try making a 1px cellspacing using margins. You can't. 1px per cell is 2px, and you can't make half a pixel. Everything else mentioned is either invalid or not supported.

    So what, exactly, did I do wrong?

  17. #17
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you want an answer? I know how I'd do it. And the answer has been given in this thread. But if you've figured out the best way, I don't want to waste my energy typing a response.
    Aaron Brazell
    Technosailor



  18. #18
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The one you suggested?

    Originally posted by iTec
    tsk tsk.. its valid, only IE doesnt support it which means its next to useless at present.

  19. #19
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <head>
     	<style type="text/css">
    	table { margin-right: 1 px; margin-bottom: 1px; border: 1px solid;}
    	td { margin-right: 1px; margin-bottom: 1px; border: 1px solid #999;}
    	</style>
    </head>
    <body>
    	<table>
    		<tr>
    			<td>cell 1</td>
    			<td>cell 2</td>
    			<td>cell 3</td>
     		</tr>
    		<tr>
    			<td>cell 4</td>
    			<td>cell 5</td>
    			<td>cell 6</td>
    		</tr>
    	</table>
    </body>
    Aaron Brazell
    Technosailor



  20. #20
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. Tried it. It didn't work.

  21. #21
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whar doesn't work about it? It displays perfectly in IE and Mozilla.....
    Aaron Brazell
    Technosailor



  22. #22
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had tried it before to no avail. Perhaps I made a mistake in testing it, but that is no reason to insult me the way you did. I guess I'll refrain from asking you questions in the future. Some mentor of the year...

  23. #23
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jason, it's not the asking that bothers me. It's the consistent dismissal of help when you ask for it. If your solution is the solution you're sold on, then why ask? The answers provided are perfectly valid and the trite attitude towards advice lent is what bothers me. Please feel free to ask questions. The "I don't really want your help because I know best" attitude is what bothers me.

    This is all water under the bridge as far as I'm concerned. I apologize for coming across as harsh as I did.

    Aaron
    Aaron Brazell
    Technosailor



  24. #24
    SitePoint Wizard geiger's Avatar
    Join Date
    Jul 2001
    Posts
    2,459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As sorry as you are, you're still coming off harsh. It's not that I reject advice. It's that the advice did not work for me, so I assumed it was not "good" advice. No one says everyone gives good advice, and no one says I have to listen to all of it. If I realized I tested margins incorrectly, there would be no "problem" at all.

    Anyway, don't think I dismiss everything. I take all into consideration, but that was the only answer in this thread that wasn't disputed by others.

  25. #25
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay. Point taken. Thread closed.
    Aaron Brazell
    Technosailor




Bookmarks

Posting Permissions

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