Can't get td widths right

**ghettobert** · 05:40 AM

Hi all,

I have this tableset which is divided in 1 row and 7 columns. In the end I want the table to look like this.

Source code here

The way is it set up now is that the white gaps lying in between all have a class "space". It's width is controlled by css, and I'd like to keep it there. This assigned width is 3px however in the browser it's rendered as 4px

The table turns out 3px (1px extra per gap) too wide which is causing me problems right now. Anyone suggestions on how to get the gaps' width right ? I'd like to keep it as clean, flexible and smart as possible so rather no spacer images and that kinda crap.

Thanks

P.S. There's a good reason why I'm using tables here so don't start screaming DIV's DIV's

**mastercomputers** · 07:24 AM

Why the extra cells, is that just used for spacers? If you wanted it to be clean then this would have to go.

Easiest way would be using cellspacing attribute in the table properties, this was not dropped in XHTML nor was there a replacement for it in CSS yet.

Here's what I suggest, as close to every pixel in your picture you supplied:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>Untitled</title>
    <style type="text/css">
      body
      {
        margin-top: 16px;
        font-size: smaller;
      }
      table
      {
        width: 557px;
      }
      td
      {
        width: 135px;
        height: 22px;
        border: thin solid #fcb64c;
        background-color: #ffecce;
        color: black;
      }
    </style>
  </head>

  <body>
    <table cellspacing="3" cellpadding="0">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>

</html>

Hope that helps. Also to note, I changed the body margins, just so your image lines up when I do a quick switch (similar to what animators would do for drawings (on paper), helps see if everything is lining up correctly).

Cheers,

MC.