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>&nbsp;</p>
                 <p>&nbsp;</p>
                 </td>
        </tr>        
             <tr>
              <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
saturationAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
BenMorelConnect With a Mentor Commented:
Hi,
Not sure of what you're trying to do, but if you want a single-pixel line around each cell, why not use the code below ?
You can also try to create your lines with <td style="border-top: 1px solid #999999;">, it should be cleaner than a gif solution (works only on <td>, not on the entire <tr>).
Available styles are : border, border-top, border-bottom, border-left, border-right.
Regards,
Ben
<table width="100" border="0" cellpadding="10" cellspacing="1" bgcolor="#999999">
<tr bgcolor="#FFFFFF">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr bgcolor="#FFFFFF">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Open in new window

0
 
prunckleCommented:
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

0
 
saturationAuthor Commented:
Why do I make everything so difficult?  Thanks!
0
All Courses

From novice to tech pro — start learning today.