...

View Full Version : table padding



nikko50
02-07-2007, 04:15 PM
How do I set padding around the outside of a table on all four sides. I ried the below with my css with no luck.

padding: 10px;

Excavator
02-07-2007, 06:00 PM
Hello nikko50,
I'm not much for tables so I'm sure someone else here knows better than I...
Just taking a guess though, I'd say you need to use either a margin or a border instead of padding.


CSS Margin Properties
The CSS margin properties define the space around elements.
http://www.w3schools.com/css/css_margin.asp

CSS Padding Properties
The CSS padding properties define the space between the element border and the element content.
http://www.w3schools.com/css/css_padding.asp

Arbitrator
02-07-2007, 08:27 PM
In the separated borders model (border-collapse: separate), Internet Explorer does not treat table padding correctly. Firefox and Opera will add the padding but Internet Explorer will not.

In the collapsed borders model (border-collapse: collapse), the table element doesn’t exhibit padding. Firefox and Internet Explorer get this right, but Opera puts the combined left and right padding to the right of the table for some reason.

If you need this effect, you may find it more reliable to put the table element into a div element and apply the border to the div instead.

Test Document:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="Patrick Garies">
<title>CF 106927 Table Padding</title>

<style type="text/css">
* { margin: 0; }
html { padding: 1em; }
table, td { border: 1px solid; }
table { margin: 0 auto; padding: 1em; background-color: #eee; }
table#separated { border-collapse: separate; /* default */ }
table#collapsed { border-collapse: collapse; }
</style>

</head>
<body>

<table id="separated">
<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>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</table>

<table id="collapsed">
<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>
<tr>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</table>

</body>
</html>

scrupul0us
02-07-2007, 08:44 PM
box model states that:
padding occurs INSIDE the border...
margins occur OUTSIDE the border...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum