css table borders and spacing

Discussion in 'HTML' started by kemton@kemton.com, May 11, 2006.

  1. Guest

    I have a table in which I'm using css to set up the options of the
    page, and I cannot get the spacing to do what I want.

    In the following html page, I would like for the table with Sublink1,
    2, and 3 to be directly against Link 3. Right now there is a gap of
    about 5 pixels. I would appreciate any suggestions on how to resolve
    this:

    ------------------ Inserted html -------------------------
    <head>
    <style>
    body {
    margin-top: 30px;
    font-family: Arial, sans-serif;
    }

    table.tb_lb {
    margin-left: 3px;
    }

    table.tb_internal_lb {
    border-collapse: collapse;
    margin-left: 3px;
    }

    td.lb_ml {
    height: 21px;
    width: 104px;
    border: 1px black solid;
    background: #D0D0D0;
    padding-left: 5px;
    font-weight: bold;
    font-size: 14px;
    }

    td.lb_sl {
    width: 86px;
    border: 1px black solid;
    background: #B0B0B0;
    padding: 2px 0px 2px 15px;
    font-weight: bold;
    font-size: 12px;
    }
    </style>

    </head>

    <body>

    <center>
    <table class=tb_lb>
    <tr><td class=lb_ml>Link 1</td></tr>
    <tr><td class=lb_ml>Link 2</td></tr>
    <tr><td class=lb_ml>Link 3
    <tr><td>
    <table class=tb_internal_lb>
    <tr><td class=lb_sl>Sublink1</td></tr>
    <tr><td class=lb_sl>Sublink2</td></tr>
    <tr><td class=lb_sl>Sublink3</td></tr>
    </table>
    </td></tr>
    <tr><td class=lb_ml>Link 4</td></tr>
    <tr><td class=lb_ml>Link 5</td></tr>
    <tr><td class=lb_ml>Link 6</td></tr>
    </table>
    </center>

    </body>
    </html>
    , May 11, 2006
    #1
    1. Advertising

  2. Neredbojias Guest

    To further the education of mankind, vouchsafed:

    > I have a table in which I'm using css to set up the options of the
    > page, and I cannot get the spacing to do what I want.
    >
    > In the following html page, I would like for the table with Sublink1,
    > 2, and 3 to be directly against Link 3. Right now there is a gap of
    > about 5 pixels. I would appreciate any suggestions on how to resolve
    > this:


    Try <table cellspacing="0" cellpadding="0"....

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, May 11, 2006
    #2
    1. Advertising

  3. Martin Jay Guest

    In message <>,
    writes
    >I have a table in which I'm using css to set up the options of the
    >page, and I cannot get the spacing to do what I want.
    >
    >In the following html page, I would like for the table with Sublink1,
    >2, and 3 to be directly against Link 3. Right now there is a gap of
    >about 5 pixels. I would appreciate any suggestions on how to resolve
    >this:


    Your problem is that by default your "tb_lb" main table has the
    attribute:

    border-collapse: separate;

    This is what gives you the white boarder around each box and, of course,
    you also get an unwanted border at the bottom of the first three boxes.
    Changing it to:

    border-collapse: collapse;

    would simply bunch all of the boxes together.

    Why don't you use everyone's friend: the unordered list? Something like
    the example I've pasted below gives you the same effect as your table
    design. I've kept the general layout similar to yours so that you can
    understand the modifications. I've also changed the font sizes from px
    to em to avoid text sizing problems with everyone's favourite browser.
    :)

    <html>
    <head>
    <title></title>
    <style type="text/css">
    body {
    margin-top: 30px;
    font-family: Arial, sans-serif;
    }

    ul.tb_lb {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    ul.tb_internal_lb {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    li.lb_ml {
    width: 104px;
    border: 1px black solid;
    background: #D0D0D0;
    padding-left: 5px;
    font-weight: bold;
    font-size: 1em;
    margin-top: 3px;
    text-align: left;
    }

    li.lb_sl {
    width: 86px;
    border: 1px black solid;
    background: #B0B0B0;
    padding: 2px 0px 2px 15px;
    font-weight: bold;
    font-size: .8em;
    margin: 0;
    text-align: left;
    }
    </style>
    </head>

    <body>

    <center>

    <ul class=tb_lb>
    <li class=lb_ml>Link 1<//li>
    <li class=lb_ml>Link 2</li>
    <li class=lb_ml>Link 3</li>
    </ul>

    <ul class=tb_internal_lb>
    <li class=lb_sl>Sublink1
    <li class=lb_sl>Sublink2
    <li class=lb_sl>Sublink3
    </ul>

    <ul class=tb_lb>
    <li class=lb_ml>Link 4</li>
    <li class=lb_ml>Link 5</li>
    <li class=lb_ml>Link 6</li>
    </ul>

    </center>

    </body>
    </html>
    --
    Martin Jay
    Martin Jay, May 11, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Selden McCabe

    Table within a Table - spacing

    Selden McCabe, Jan 14, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    334
    MWells
    Jan 15, 2005
  2. news frontiernet.net
    Replies:
    6
    Views:
    1,178
    news frontiernet.net
    Dec 5, 2003
  3. George
    Replies:
    9
    Views:
    4,873
    George
    Oct 25, 2004
  4. Replies:
    1
    Views:
    399
    Jonathan N. Little
    Jan 12, 2007
  5. Pine nut
    Replies:
    7
    Views:
    1,573
    Jonathan N. Little
    Aug 14, 2007
Loading...

Share This Page