How to get a small amount of white space around a table

**Dez** · Sep 6, 2007, 09:20

Has anyone found a way in css to have a small amount (10px) of white space to the left and right of a table please ?

I have been Googling for some time to find the answer for it, but all I found was hspace=pixels - which didn't work ;-(

Any help very much appreciated.

Dez

**AutisticCuckoo** · Sep 6, 2007, 09:46

This should do it, but I don't know how well browsers support it:

Code CSS:

table {
  padding-left: 10px;
  padding-right: 10px;
}

**mainlink** · Sep 6, 2007, 09:49

Sorry, if I got you wrong, but are you asking for something like:

margin 0 10px 0 10px;

?

**CraniumDesigns** · Sep 6, 2007, 10:58

dont use AutisticCuckoo's method. padding adds space INSIDE the table. you want to use margins. use mainlink's method.

**bluedreamer** · Sep 6, 2007, 16:09

You could wrap the table in a div if it suits your layout...

Code:

<div class="tableSection">
<table>
<tr>
<td>
Content
</td>
</tr>
</table>
</div>

and the CSS

Code:

.tableSection {
margin: 0 10px 0 10px;
}
.tableSection table {
width: 100%;
}

there are many ways to do it!

**Paul O'B** · Sep 6, 2007, 16:35

[quote-CraniumDesigns]
padding adds space INSIDE the table.
[/quote]

No it doesn't and Tommy is quite correct. Adding padding to the td creates space inside but adding it to the table creates padding between the td and the table as shown by this code.

Code:

table {
  padding-left: 100px;
  padding-right: 100px;
    border:1px solid red;
}
td{border:1px solid #000}

However you will need to be using firefox or opera as IE doesn't support it.

Just use margins if you want some space around the outside of the table.

**Dez** · Sep 7, 2007, 07:37

Originally Posted by bluedreamer

You could wrap the table in a div if it suits your layout...

Code:

<div class="tableSection">
<table>
<tr>
<td>
Content
</td>
</tr>
</table>
</div>

and the CSS

Code:

.tableSection {
margin: 0 10px 0 10px;
}
.tableSection table {
width: 100%;
}

there are many ways to do it!

Many thanks to all who helped on this - it's appreciated.

I've tried the margins route and the div route above, but neither have worked ;-( I'm obviously doing something wrong somewhere ;-(

http://www.130605.com/tables-space or if it's better, here's the code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<link rel="stylesheet" type="text/css" href="http://www.130605.com/styles-tables.css">
</head>
<body>
<br>
<br>
<div class="table">
<table class="table">
<tr>
<td width="70" align="left" valign="bottom" style="vertical-align: bottom">
<b>Header 1</b></td>
<td align="left" valign="bottom" style="vertical-align: bottom" width="200">
<b>Header 2</b></td>
<td width="60" align="left" valign="bottom" style="vertical-align: bottom">
<b>Header 3</b></td>
<td width="60" align="left" valign="bottom" style="vertical-align: bottom">
<b>Header 4</b></td>
<td width="130" align="left" valign="bottom" style="vertical-align: bottom">
<b>Header 5</b></td>
</tr>
<tr>
<td align="right">
 </td>
<td>
 </td>
<td width="67" align="right">
 </td>
<td width="60" align="right">
 </td>
<td align="right">
 </td>
</tr> <tr>
<td align="right">
 </td>
<td>
 </td>
<td width="67" align="right">
 </td>
<td width="60" align="right">
 </td>
<td align="right">
 </td>
</tr> <tr>
<td width="60" align="right">
 </td>
<td>
 </td>
<td width="67" align="right">
 </td>
<td width="60" align="right">
 </td>
<td align="right">
 </td>
</tr>
</table>
</div>
</body>
</html>

body, html {
color: #006;
background: #006;
text-align: center;
font-weight: normal;
font-family: verdana, arial, helvetica, sans-serif;
border: 0px none;
padding: 0;
}

body {
margin: 12px 5px 9px 5px;
}

#table {
width: 100%;
margin: 0 10px 0 10px;
background: #fff;
}

.table {
width: 752px;
color: #000090;
background: #fff;
border-collapse: collapse;
margin: 0 auto;
border-color: #006;
vertical-align: bottom;
text-align: left;
font-size: 14px;
}

.table td {
font-size: 14px;
vertical-align: bottom;
border: 1px solid #000080;
margin: 0px;
padding: 6px;
}

One other thing, do divs always start with a # in the css please ?

Dez.

**AutisticCuckoo** · Sep 7, 2007, 08:47

Originally Posted by Dez

One other thing, do divs always start with a # in the css please ?

No. The '#' indicates an ID selector.

Code CSS:

#foo {
  ...
}

This rule will apply to the element that has id="foo" in an HTML or XHTML document. It doesn't matter if it's a DIV, a P, a TABLE, an EM or whatever. It is, in fact, equivalent to *#foo.

Note that IDs must be unique; you can't have two elements with the same ID value in one document. This is why *#foo is often written as #foo – because there can be only one matching element anyway.

It is possible to use a type selector along with an ID selector, e.g., div#foo or em#foo, but you won't see many of those around.

**Paul O'B** · Sep 7, 2007, 09:09

HI,

Your request makes no sense I'm afraid.

Your example shows a centred table which means that there is already space to the left and right sides so I am at a loss as to what you want.

You have set the table margins to auto so that the table becomes centred. What can you possible mean in that you want "10px of white space to the left and right" ?

Also note that this makes no sense either.

Code:

<div class="table">
    <table class="table">

While you can use classes everywhere I don't think thats what you meant to do. If the div was supposed to be an ID then the styles for #table are over constrained anyway because you have set 10px margin plus 100% width which is 20px to big for anywhere

(on static elements you could omit the width and the element will expand to fill the void.)

If you want some space between the table and the viewport edge then just set the body's margin or padding accordingly.

However I think you must be after some other effect that we are not understanding yet

**Dez** · Sep 7, 2007, 10:06

Many thanks Paul and Autistic Cuckoo. My knowledge of css is very limited, (that's one of the reasons why I'm here), so please bear with me ;-)

I think I'm understanding a lot more about this and have just made some changes :

http://www.130605.com/tables-space/

How do I now make the spaces on the left and right of the table to be a little smaller, but with the table staying the same width please ?

The helps appreciated.

Dez.

**Paul O'B** · Sep 8, 2007, 07:14

Hi,

Which space are we talking about exactly now? Do you mean the space inside the table cells themselves or are you still talking about the space outside the table.

I'm still a little confused because there is no real space outside the table as it is centred and will just move with window width. If you want some space when the window is closed smaller then just adjust the padding on the body to give you a buffer between the viewport and the table.

My knowledge of css is very limited, (that's one of the reasons why I'm here), so please bear with me ;-)

That's no problem as we were all beginners at one time. However you do need to explain exactly what the problem is because sometimes it's hard for use to understand what your problem is. usually the solution to the problem is the easy part but understanding what someone really wants is usually more complicated

**Dez** · Sep 8, 2007, 07:35

HI Paul,

Can't think of any other way to explain it really, sorry! ;-(

"How do I now make the spaces on the left and right of the table to be a little smaller, but with the table staying the same width please ?"

Dez

**Paul O'B** · Sep 8, 2007, 07:57

Hi,

You'll have to draw me a picture as I'm just not getting this lol

Here is a picture of what I think you are asking me and you can soon see why it makes no sense.

http://www.pmob.co.uk/temp/images/tablespace.gif

**Dez** · Sep 8, 2007, 08:27

Originally Posted by Paul O'B

Hi,
You'll have to draw me a picture as I'm just not getting this lol

Ok :

http://www.130605.com/tables-space-paul/

Makes perfect sense lol

Dez

**Paul O'B** · Sep 8, 2007, 10:16

Hi,

You've taken your page down now that you've finally shown us what you wanted

Also your example page wasn't showing a background colour either!

The answer is still the same as we already gave you though. Just add a div around the table width the correct width and auto margins and then either a pply a 10px margin to the table or use padding on the div.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body{    background:#ccc;}
.twrap{
    width:780px;
    background:#fff;
    margin:100px auto 0;
}
table {
    width:760px;
    margin:10px;
    background:#fff;
    border-collapse:collapse;
}
td,th{border:1px solid #000}


</style>
</head>
<body>
<div class="twrap">
    <table>
        <tr>
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
            <th scope="col">D</th>
            <th scope="col">E</th>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
</div>
</body>
</html>

If you don't want the top and bottom margins then just change them to margin :0 10px instead

**Dez** · Sep 8, 2007, 12:03

Many thanks Paul, you've been an excellent help.

(The question has always remained unaltered - i.e. how to get more space to the left and right of the table).

http://www.130605.com/tables-paul/

Your helps been much appreciated.

Dez.

The SitePoint Forums have moved.

User Tag List

Thread: How to get a small amount of white space around a table

Thread Tools

Display

How to get a small amount of white space around a table

Bookmarks

Bookmarks

Posting Permissions