Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 371
Petruza Avatar asked Nov 17 '09 18:11

Petruza


People also ask

How do you add padding to a table in CSS?

To set cell padding in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property padding.

How do you put padding inside a table?

You can easily set padding inside the table cells using the CSS padding property. It is a valid way to produce the same effect as the table's cellpadding attribute. Similarly, you can use the CSS border-spacing property to apply the spacing between adjacent table cell borders like the cellspacing attribute.

Can we give padding to table?

HTML tables can adjust the padding inside the cells, and also the space between the cells.

What is cell padding in CSS?

Cell padding specifies the space between the cell content and its borders.


1 Answers

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; } 
like image 56
Rob Avatar answered Sep 22 '22 23:09

Rob