Tables and CSS

Discussion in 'HTML' started by Malcolm Collett, Oct 27, 2003.

  1. This code works the way I want it to, provided I have the cellspacing="0" in
    the table tag. If I take this out, then I get a 1 pixel gap in the border
    above and below the <th> row.

    What do I put into the style sheet so that I can get rod of the
    cellspacing="0"? I have tried margin:0 and padding:0 in various places, but
    it doesn't help.

    Thanks
    Malcolm

    <h4><a name="Beginners">Beginners</h4></a></h4>
    <table class="restable" cellspacing="0">
    <tbody class="restbody">
    <tr class="restr">
    <th class="resthhandler">Handler</th>
    <th class="resthdog">Dog</th>
    <th class="resthpercent">%</th>
    </tr>
    <tr class="restr">
    <td class="restdhandler">Joe Bloggs</td>
    <td class="restddog">Rover</td>
    <td class="restdpercent"> 96.0</td>
    </tr>
    </tbody>
    </table>
    <br>
    <div class="resdivback"><a class="BodySmall" href="#">Back To Top</a></div>

    The style sheet contains this:
    table.restable {}
    tbody.restbody {}
    tr.restr {}
    th.resthhandler {width:170px; border-top:thin solid black;
    border-bottom:thin solid black;}
    th.resthdog {width:100px; border-top:thin solid black; border-bottom:thin
    solid black;}
    th.resthpercent {width: 45px; border-top:thin solid black;
    border-bottom:thin solid black;}
    td.restdhandler {width:170px;}
    td.restddog {width:100px;}
    td.restdpercent {width: 45px;}
    resdivback {}
    Malcolm Collett, Oct 27, 2003
    #1
    1. Advertising

  2. Malcolm Collett

    Steve Pugh Guest

    "Malcolm Collett" <> wrote:

    >This code works the way I want it to, provided I have the cellspacing="0" in
    >the table tag. If I take this out, then I get a 1 pixel gap in the border
    >above and below the <th> row.
    >
    >What do I put into the style sheet so that I can get rod of the
    >cellspacing="0"? I have tried margin:0 and padding:0 in various places, but
    >it doesn't help.


    border-spacing: 0;

    Not supported by some browsers, including all versions to date of IE.

    Though you may find that border-collapse: collapse; has the effect you
    want. Obviously collapse borders must have zero space between them,
    but a 2px border next to a 2px border will now appear as 2px
    (collapsed) rather than s 4px. From the look of the code provided this
    shouldn't matter in your case.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Oct 27, 2003
    #2
    1. Advertising

  3. > >What do I put into the style sheet so that I can get rod of the
    > >cellspacing="0"? I have tried margin:0 and padding:0 in various places,

    but
    > >it doesn't help.


    > Though you may find that border-collapse: collapse; has the effect you
    > want.


    Thanks Steve
    border-collapse did exactly what I want.

    Malcolm
    Malcolm Collett, Oct 27, 2003
    #3
  4. Malcolm Collett

    DU Guest

    Malcolm Collett wrote:

    > This code works the way I want it to, provided I have the cellspacing="0" in
    > the table tag. If I take this out, then I get a 1 pixel gap in the border
    > above and below the <th> row.
    >
    > What do I put into the style sheet so that I can get rod of the
    > cellspacing="0"?


    Border-spacing is not supported by all browsers but cellspacing="0" is
    well supported and is not deprecated. So it's an attribute to use here
    for good reasons.

    I have tried margin:0 and padding:0 in various places, but
    > it doesn't help.
    >
    > Thanks
    > Malcolm
    >
    > <h4><a name="Beginners">Beginners</h4></a></h4>


    Improper nesting here. One extra </h4>

    > <table class="restable" cellspacing="0">
    > <tbody class="restbody">
    > <tr class="restr">
    > <th class="resthhandler">Handler</th>
    > <th class="resthdog">Dog</th>
    > <th class="resthpercent">%</th>
    > </tr>
    > <tr class="restr">
    > <td class="restdhandler">Joe Bloggs</td>
    > <td class="restddog">Rover</td>
    > <td class="restdpercent"> 96.0</td>
    > </tr>
    > </tbody>
    > </table>
    > <br>
    > <div class="resdivback"><a class="BodySmall" href="#">Back To Top</a></div>
    >
    > The style sheet contains this:
    > table.restable {}


    class restable is not defined anywhere.

    > tbody.restbody {}
    > tr.restr {}
    > th.resthhandler {width:170px; border-top:thin solid black;
    > border-bottom:thin solid black;}
    > th.resthdog {width:100px; border-top:thin solid black; border-bottom:thin
    > solid black;}
    > th.resthpercent {width: 45px; border-top:thin solid black;
    > border-bottom:thin solid black;}
    > td.restdhandler {width:170px;}
    > td.restddog {width:100px;}
    > td.restdpercent {width: 45px;}
    > resdivback {}
    >
    >
    >
    >



    IMO, your style sheet is redundant, not well optimized, compact-formed,
    too many classes declared and defined. How about:

    #idTable
    {
    table-layout:fixed;
    border-collapse:collapse;
    }

    #idTable th
    {
    border-top:thin solid black;
    border-bottom:thin solid black;
    }

    (...)

    <table id="idTable" cellspacing="0">
    <col width="170"><col width="100"><col width="45">
    <tbody>
    <tr>
    <th>Handler</th>
    <th>Dog</th>
    <th>%</th>
    </tr>
    <tr>
    <td>Joe Bloggs</td>
    <td>Rover</td>
    <td> 96.0</td>
    </tr>
    </tbody>
    </table>

    Not tested.

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
    - Resources, help and tips for Netscape 7.x users and Composer
    - Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
    http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
    DU, Oct 28, 2003
    #4
  5. Thanks for taking time to give such a detailed reply.

    > > What do I put into the style sheet so that I can get rod of the
    > > cellspacing="0"?

    >
    > Border-spacing is not supported by all browsers but cellspacing="0" is
    > well supported and is not deprecated. So it's an attribute to use here
    > for good reasons.


    Not the answer I was hoping to hear. But I think I will drop the
    border-spacing and go back to cellspacing="0".


    > > <h4><a name="Beginners">Beginners</h4></a></h4>

    >
    > Improper nesting here. One extra </h4>


    Fixed. (Hadn't noticed it - the browser didn't mind at all!)


    > > The style sheet contains this:
    > > table.restable {}

    >
    > class restable is not defined anywhere.


    Actually there's a reason for it. I have created a small html code
    generator. This generates the table html. It will be given to someone who
    has the data. I will then be given the html containing the data. Once
    deployed, I can't easily change the generated html (it isn't deployed yet).
    A series of about 20 or 30 tables will be created.

    I will then use CSS for the layout of the tables. That is why I was wanting
    to get rid of the cellspacing="0" in the html.


    > IMO, your style sheet is redundant, not well optimized, compact-formed,
    > too many classes declared and defined. How about:


    Yes, there is redundancy. I have put plenty of classes into the html. In the
    CSS, not all of them are used. But they are there if I need them.

    > #idTable
    > {
    > table-layout:fixed;
    > border-collapse:collapse;
    > }
    >
    > #idTable th
    > {
    > border-top:thin solid black;
    > border-bottom:thin solid black;
    > }
    >
    > (...)
    >
    > <table id="idTable" cellspacing="0">
    > <col width="170"><col width="100"><col width="45">
    > <tbody>
    > <tr>
    > <th>Handler</th>
    > <th>Dog</th>
    > <th>%</th>
    > </tr>
    > <tr>
    > <td>Joe Bloggs</td>
    > <td>Rover</td>
    > <td> 96.0</td>
    > </tr>
    > </tbody>
    > </table>


    I will have a look at this. Especially the table-layout:fixed.

    Thanks

    Malcolm
    Malcolm Collett, Oct 28, 2003
    #5
  6. Malcolm Collett

    Sid Ismail Guest

    On Tue, 28 Oct 2003 23:48:34 +0200, "Malcolm Collett" <>
    wrote:

    : But I think I will drop the
    : border-spacing and go back to cellspacing="0".

    Wise man. Tables are not and never ever will be deprecated. And
    cellspacing goes to tables as love is to marriage.

    Sid
    Sid Ismail, Oct 28, 2003
    #6
  7. Sid Ismail wrote:
    > On Tue, 28 Oct 2003 23:48:34 +0200, "Malcolm Collett"
    > <> wrote:
    >
    >> But I think I will drop the
    >> border-spacing and go back to cellspacing="0".

    >
    > Wise man. Tables are not and never ever will be deprecated. And
    > cellspacing goes to tables as love is to marriage.


    like a fish needs a bike?

    --
    William Tasso - http://WilliamTasso.com
    William Tasso, Oct 28, 2003
    #7
    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. Mark Rae

    Tables and CSS

    Mark Rae, Jul 16, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    1,930
    Mark Rae
    Jul 17, 2004
  2. Christopher R

    Tables and CSS

    Christopher R, Jun 26, 2003, in forum: HTML
    Replies:
    1
    Views:
    788
    David Dorward
    Jun 26, 2003
  3. Peter Bassett
    Replies:
    3
    Views:
    916
    Augustus
    Aug 15, 2003
  4. Otuatail

    Tables within tables

    Otuatail, Jul 31, 2004, in forum: HTML
    Replies:
    7
    Views:
    486
  5. Chris Brat
    Replies:
    5
    Views:
    687
    =?iso-8859-1?q?Luis_M._Gonz=E1lez?=
    Aug 22, 2006
Loading...

Share This Page