asked on

1 pixel width table border

I am trying to create an outer lying table structure that has a 1 pixel horizontal and vertical width. I also, however, need it to be able to separate cells. If I use the following with a 1 pixel spacer, I don't get any lines down the sides of the table. If I remove the spacer gif and set cellpadding=1, then I get a 2 pixel line across the top but 1 down the sides....How can I fix this once and for all?

      <table border="0" cellpadding="0" cellspacing="0" width="910" bgcolor="#333333" style="text-align:left;">

      <tr>
      <td colspan=4><img src=spacer.gif height=1 width=1></td>
</tr>
      <tr>
      <td colspan=4 bgcolor="ffffff"><p>asdfasdf asdf</p>
       <p> </p>
       <p> </p>
       </td>
</tr>
     <tr>
      <td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

ASKER CERTIFIED SOLUTION

BenMorel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

prunckle

Saturation,

Sometimes it works best to use a shim row in order to set the widths first...I'm not 1005 sure from the example, but it looks like you want two columns inside the border, correct? if that's the case, try this:

<table width="910" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333">
  <tr>
    <td style="background-color:#000000;"><img src="pixel.gif" width="1" height="1"></td>
    <td colspan="2" style="background-color:#000000;"><img src="pixel.gif" width="908" height="1"></td>
    <td style="background-color:#000000;"><img src="pixel.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td rowspan="3" style="background-color:#000000;"><img src="pixel.gif" width="1" height="1"></td>
    <td bgcolor="#FFFFFF"><img src="pixel.gif" width="454" height="1"></td>
    <td><img src="pixel.gif" width="454" height="1"></td>
    <td rowspan="3" style="background-color:#000000;"><img src="pixel.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">Some text here</td>
    <td><span class="style1">Differnt Text here </span></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">Other text here </td>
    <td><span class="style1">Alternate text here </span></td>
  </tr>
  <tr>
    <td style="background-color:#000000;"><img src="pixel.gif" width="1" height="1"></td>
    <td colspan="2" style="background-color:#000000;"><img src="pixel.gif" width="908" height="1"></td>
    <td style="background-color:#000000;"><img src="pixel.gif" width="1" height="1"></td>
  </tr>
</table>

Open in new window

saturation

ASKER

Why do I make everything so difficult? Thanks!