SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    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

  2. #2
    SitePoint Author silver trophybronze trophy

    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

  3. #3
    SitePoint Enthusiast
    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;

    ?

  4. #4
    SitePoint Addict
    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

  5. #5
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,359
    Mentioned
    2 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>
    and the CSS

    Code:
    .tableSection {
    margin: 0 10px 0 10px;
    }
    .tableSection table {
    width: 100%;
    }
    there are many ways to do it!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 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.

  7. #7
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    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">
    &nbsp;</td>
    <td>
    &nbsp;</td>
    <td width="67" align="right">
    &nbsp;</td>
    <td width="60" align="right">
    &nbsp;</td>
    <td align="right">
    &nbsp;</td>
    </tr> <tr>
    <td align="right">
    &nbsp;</td>
    <td>
    &nbsp;</td>
    <td width="67" align="right">
    &nbsp;</td>
    <td width="60" align="right">
    &nbsp;</td>
    <td align="right">
    &nbsp;</td>
    </tr> <tr>
    <td width="60" align="right">
    &nbsp;</td>
    <td>
    &nbsp;</td>
    <td width="67" align="right">
    &nbsp;</td>
    <td width="60" align="right">
    &nbsp;</td>
    <td align="right">
    &nbsp;</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.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dez View Post
    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.
    Birnam wood is come to Dunsinane

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 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">
    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&#37; 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

  10. #10
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 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 ;-)
    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

  12. #12
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    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

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 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

  14. #14
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  16. #16
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,436
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •