#1
  1. No Profile Picture
    Caffeine - Nicotine - Sugar
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Germany, Cologne
    Posts
    60
    Rep Power
    14

    Tables and Borders in HTML 4.01 / CSS 1.0


    lo ppl,

    how do format a table like this?

    Code:
    +-----------------+
    | TH  | TH  | TH  |
    +-----------------+
      TD  | TD  | TD  
    +-----+-----+-----+
      TD  | TD  | TD  
    +-----+-----+-----+
      TD  | TD  | TD  
    +-----+-----+-----+
      TD  | TD  | TD
    I want to have the TABLE no border, the TH with a border at all four sides, and the TD with borders only where they are next to another TD.

    I thought it was the rules and frame attributes of TABLE, but i couldn't get it right.

    What is the smartest way (with a stylesheet if possible) to format this table?

    Thx.
  2. #2
  3. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    24
    <table border=0>
    <th style="border:thin solid #000000" colspan="3">Table Header</th>
    <tr><td>CELL</td><td>CELL</td><td>CELL</td></tr>
    </table>
  4. #3
  5. No Profile Picture
    Caffeine - Nicotine - Sugar
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2001
    Location
    Germany, Cologne
    Posts
    60
    Rep Power
    14
    Originally posted by binky
    <table border=0>
    <th style="border:thin solid #000000" colspan="3">Table Header</th>
    <tr><td>CELL</td><td>CELL</td><td>CELL</td></tr>
    </table>

    Uhhm thank you binky, but that doesn't answer my question at all. Looks like this:

    Code:
    +-----------------+
    |       TH        |
    +-----------------+
      TD    TD    TD
  6. #4
  7. Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Oct 2001
    Location
    New Zealand
    Posts
    1,774
    Rep Power
    24
    Oops, sorry...

    It's not easy to do dynamically but:

    <table border=0 width="50%" height="50%" cellpadding=0 cellspacing=0>
    <th style="border:dashed thin" colspan="3">Table Header</th>

    <tr><td style="border-style: none dashed dashed none; border-width:thin;">CELL</td>
    <td style="border-style: none dashed dashed none; border-width:thin;">CELL</td>
    <td style="border-style: none none dashed none; border-width:thin;">CELL</td></tr>

    <tr><td style="border-style: none dashed dashed none; border-width:thin;">CELL</td>
    <td style="border-style: none dashed dashed none; border-width:thin;">CELL</td>
    <td style="border-style: none none dashed none; border-width:thin;">CELL</td></tr>

    <tr><td style="border-style: none dashed dashed none; border-width:thin;">CELL</td>
    <td style="border-style: none dashed dashed none; border-width:thin;">CELL</td>
    <td style="border-style: none none dashed none; border-width:thin;">CELL</td></tr>

    <tr><td style="border-style: none dashed none none; border-width:thin;">CELL</td>
    <td style="border-style: none dashed none none; border-width:thin;">CELL</td>
    <td style="border-style: none none none none; border-width:thin;">CELL</td></tr>
    </table>

    will work..

IMN logo majestic logo threadwatch logo seochat tools logo