SitePoint Sponsor |
|
User Tag List
Results 1 to 16 of 16
-
Sep 6, 2007, 09:20 #1
- Join Date
- Jun 2005
- Posts
- 1,441
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How to get a small amount of white space around a table
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
-
Sep 6, 2007, 09:46 #2
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This should do it, but I don't know how well browsers support it:
Code CSS:table { padding-left: 10px; padding-right: 10px; }
Birnam wood is come to Dunsinane
-
Sep 6, 2007, 09:49 #3
- Join Date
- Jun 2007
- Location
- Frankfurt/Germany
- Posts
- 66
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry, if I got you wrong, but are you asking for something like:
margin 0 10px 0 10px;
?
-
Sep 6, 2007, 10:58 #4
- Join Date
- Sep 2001
- Posts
- 320
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
dont use AutisticCuckoo's method. padding adds space INSIDE the table. you want to use margins. use mainlink's method.
Steve Davis
-
Sep 6, 2007, 16:09 #5
- Join Date
- Jul 2005
- Location
- Middle England
- Posts
- 3,417
- Mentioned
- 3 Post(s)
- Tagged
- 0 Thread(s)
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>
Code:.tableSection { margin: 0 10px 0 10px; } .tableSection table { width: 100%; }
-
Sep 6, 2007, 16:35 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
[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.
-
Sep 7, 2007, 07:37 #7
- Join Date
- Jun 2005
- Posts
- 1,441
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 7, 2007, 08:47 #8
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No. The '#' indicates an ID selector.
Code CSS:#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.Birnam wood is come to Dunsinane
-
Sep 7, 2007, 09:09 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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">
(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
-
Sep 7, 2007, 10:06 #10
- Join Date
- Jun 2005
- Posts
- 1,441
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 8, 2007, 07:14 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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 ;-)
-
Sep 8, 2007, 07:35 #12
- Join Date
- Jun 2005
- Posts
- 1,441
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 8, 2007, 07:57 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Sep 8, 2007, 08:27 #14
- Join Date
- Jun 2005
- Posts
- 1,441
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok :
http://www.130605.com/tables-space-paul/
Makes perfect sense lol
Dez
-
Sep 8, 2007, 10:16 #15
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
You've taken your page down now that you've finally shown us what you wantedAlso 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>
-
Sep 8, 2007, 12:03 #16
- Join Date
- Jun 2005
- Posts
- 1,441
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks