an HTML problem, not PHP

methatron

I have this really annoying problem with HTML tables I cant solve.
if you can, paste this code and run it somewhere and see what my problem is.
(I want the red TD's to be indeed 1px wide in the 2nd table as well).
the img is just a 1x1 transparent-pixel image so the TD wont be empty.
Thanks in advance.

code ->

<body>
<br><br>
<center>
why here the red TD's are indeed 1px wide
<table border="1" cellspacing="0" cellpadding="0" width="80%">
<tr>
<td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
<td colspan="3" style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
</tr>
<tr>
<td colspan="2" style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
<td style="background-color:aqua;"><img src="/images_n/tp.gif" alt="" height="1px" width="1"></td>
<td colspan="2" style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
</tr>
</table>
<br><br>
why here the red TD's are NOT 1px wide
<table border="1" cellspacing="0" cellpadding="0" width="80%">
<tr>
<td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
<td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
</tr>
<tr>
<td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
<td colspan="3" style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
</tr>
<tr>
<td colspan="2" style="background-color:black;">a</td>
<td style="background-color:aqua;">b</td>
<td colspan="2" style="background-color:black;">c</td>
</tr>
</table>
</center>
</body>

TF_TheMoon

is your path to the images correct. You can fix it by adding a   to the 2nd table first row, columns 2-4. Its not clean though, and I'm too hungry to think fo the correct solution

methatron

the image path is correct
and adding   wont make the red TD's 1 pixel wide

Weedpacket

And moving this to a more appropriate forum.

michaewlewis

they both are 1 px in Konqueror browser, and in FF the red columns in the top table are 2 px and the bottom ones are 1 px. Must be a bug in IE causing it to make it 200 px or whatever the dimension is.
Perhaps you could try nesting tables instead of using colspan.

Table 1:
<table border="0" cellspacing="0" cellpadding="0" width="80%">
  <tr>
    <td>
    <table style="border-bottom-style:none;" width="100%" cellspacing="0" cellpadding="0" border="1">
      <tr>
        <td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
        <td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
        <td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="1">
      <tr>
        <td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
        <td width="60%" style="background-color:aqua;"><img src="/images_n/tp.gif" alt="" height="1px" width="1"></td>
        <td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
      </tr>
    </table>
    </td>
  </tr>
</table>

<br>
Table 2:
<table border="0" cellspacing="0" cellpadding="0" width="80%">
  <tr>
    <td>
    <table style="border-bottom-style:none;" width="100%" cellspacing="0" cellpadding="0" border="1">
      <tr>
        <td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
        <td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
        <td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
        <td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
        <td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td>
    <table style="border-bottom-style:none;" width="100%" cellspacing="0" cellpadding="0" border="1">
      <tr>
        <td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
        <td style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
        <td style="width:1px; background-color:red;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="1">
      <tr>
        <td style="background-color:black;">a</td>
        <td style="background-color:aqua;">b</td>
        <td style="background-color:black;">c</td>
      </tr>
    </table>
    </td>
  </tr>
</table>

nc_phpguy

I wouldnt use Style attributes to specify width for tables. It can cause issues between browsers. The 1st table was easy, the 2nd table is a bit trickier. If you know the absolute width of the table you can code it like i did below. Hope this points you int the right direction.

nc_phpguy

<body>
<br><br>
<center>
why here the red TD's are indeed 1px wide
<table border="1" cellspacing="0" cellpadding="0" width="80%">
<tr>
<td width="1" bgcolor="red"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
<td colspan="3" style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td width="1" bgcolor="red"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
</tr>

</table>
<br><br>
why here the red TD's are NOT 1px wide
<table border="1" cellspacing="0" cellpadding="0" width="500">
<tr>
<td width="1" bgcolor="red"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
<td style="background-color:black;" width="166"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td style="background-color:black;" width="166"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td style="background-color:black;" width="166"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td width="1" bgcolor="red"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
</tr>
<tr>
<td width="1" bgcolor="red"><img src="/images_n/tp.gif" alt="" height="15" width="1"></td>
<td colspan="3" style="background-color:black;"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
<td width="1" bgcolor="red"><img src="/images_n/tp.gif" alt="" height="1" width="1"></td>
</tr>
<tr>
<td colspan="2" style="background-color:black;">a</td>
<td style="background-color:aqua;">b</td>
<td colspan="2" style="background-color:black;">c</td>
</tr>
</table>
</center>
</body>

Weedpacket

If you're going to be using styles to adjust the size of the table, then what are all those tp.gifs for? There's no point using 21st century layout techniques if you're going to override them with 20th-century ones. How much of this table is even necessary, and how much of it can be eliminated by actually using CSS for more than just colouring-in?

michaewlewis

try using CSS layout instead CSS Zen Garden has some great examples