htmlcsscellpaddingtablelayout

How do you specify table padding in CSS? (table, not cell, padding )


I have a table with a colored background and I need to specify the padding between the table and it's content, I.E. cells.
The table tag doesn't seem to accept a padding value.
Firebug shows the table and tbody's layout with padding 0 but doesn't accept any value entered for them, so I guess they just don't have the padding property.
But the thing is I want the same separation between cells than the top cells with the table top and the bottom cells with the table's bottom.
Again, what I want is not cell-padding.

EDIT: Thanks, what I really needed, I realize now, was border-spacing, or its html equivalent, cellspacing.
But for some reason, they don't do anything in the site I'm working on.
Both work great on a separate HTML, but in the site they don't.
I thought it could be some style overwriting the property, but cellspacing and an inline border-spacing shouldn't get overwritten, right?
(I use firefox )

EDIT 2: No, TD padding is NOT what I need. With TD padding, top and bottom paddings of adjacent cells sum up, so there's double the space (pad actually) between two cells than between the top cell and the table top border. I want to have exactly the same distance between them.


Solution

  • The easiest/best supported method is to use <table cellspacing="10">

    The css way: border-spacing (not supported by IE I don't think)

        <!-- works in firefox, opera, safari, chrome -->
        <style type="text/css">
        
        table.foobar {
        	border: solid black 1px;
        	border-spacing: 10px;
        }
        table.foobar td {
        	border: solid black 1px;
        }
        
        
        </style>
        
        <table class="foobar" cellpadding="0" cellspacing="0">
        <tr><td>foo</td><td>bar</td></tr>
        </table>

    Edit: if you just want to pad the cell content, and not space them you can simply use

    <table cellpadding="10">
    

    OR

    td {
        padding: 10px;
    }