Need help with this table

**Noobstein** · 06-07-2007, 03:15 PM

The image in the first row throws off the rest off the alignment of my other cells. I cant fit multiple td cells on a row that's directly below the image. They always go past the borders of the image even though i only have a little bit of text. I can get the first cell to go underneith, but the second cell is always far off to the right.

I've been playing with it for a while now and finally realized that I need help.

Code:

<body bgcolor="#ffffff">
<table bgcolor="#cccccc" cellspacing="10" style="border: solid 3px black;">
  <tr>
    <td style="padding-bottom:5px; background-color:#cccccc;"> <img src="../../web images/header.png" /></td>
  </tr>
  <tr align="left">
    <th><td align="left" height="100" width="100" style="background:#ffffff;">Auf Wierdshen</td>
     <td height="100" width="100" style="background:#ffffff;">Auf Wierdshen</td></th>
  </tr>
</table>
</body>

**JeremyMiller** · 06-07-2007, 03:31 PM

It's this line that's jacked:

HTML Code:

<th><td align="left" height="100" width="100" style="background:#ffffff;">Auf Wierdshen</td>
     <td height="100" width="100" style="background:#ffffff;">Auf Wierdshen</td></th>

Your first <th> begins populating the first cell, then you do a <td> which moves on to the next cell (which is to the right of your image) and begins breaking your HTML.

I'd suggest changing to

HTML Code:

<th align="left" height="100" width="100" style="background:#ffffff;">Auf Wierdshen</th>
     <th height="100" width="100" style="background:#ffffff;">Auf Wierdshen</th>

or

HTML Code:

<td align="left" height="100" width="100" style="background:#ffffff;">Auf Wierdshen</td>
     <td height="100" width="100" style="background:#ffffff;">Auf Wierdshen</td>

depending on if you want those as a header. Either way,you'll want to adjust your image to span both rows now, so your code would then be like

HTML Code:

<body bgcolor="#ffffff">
<table bgcolor="#cccccc" cellspacing="10" style="border: solid 3px black;">
  <tr>
    <td style="padding-bottom:5px; background-color:#cccccc;"> <img src="../../web images/header.png" colspan="2"/></td>
  </tr>
  <tr align="left">
    <th align="left" height="100" width="100" style="background:#ffffff;">Auf Wierdshen</th>
     <th height="100" width="100" style="background:#ffffff;">Auf Wierdshen</th>
  </tr>
</table>
</body>

Note, that you should not be using a table for layout. Tables are for marking up data, not layout.

**tripy** · 06-07-2007, 03:52 PM

HTML Code:

<body bgcolor="#ffffff">
  <table bgcolor="#cccccc" cellspacing="10" style="border: solid 3px black;">
    <tr>
      <td style="padding-bottom:5px; background-color:#cccccc;" colspan="3">
        <img src="../../web images/header.png" alt="" />
      </td>
    </tr>
    <tr align="left">
      <th>this is a column header</th>
      <td align="left" height="100" width="100" style="background:#ffffff;">Auf Wierdshen</td>
      <td height="100" width="100" style="background:#ffffff;">Auf Wierdshen</td>
    </tr>
  </table>
</body>

A th tag is a column header, ans is treated the same way as a <td> by a browser.
You don't wrap it around td's.

Your cells where shifted because the unique cell in the first line growed to take the size of the picture.
As there was no colspan, the browser respected the order of the columns.
The rowspan allows you to specify to the browser how much column a given cell must span over.

As I keeped the <th>, it makes 3 columns, thus the colspan="3" in the first cell attributes.

**Noobstein** · 06-07-2007, 03:53 PM

I'm only using tables because its going to be a craigslist advertisment and I can't use divs.

It didn't work.

Code:

<body bgcolor="#ffffff">
<table bgcolor="#cccccc" cellspacing="10" style="border: solid 3px black;">
  <tr>
    <td style="padding-bottom:5px; background-color:#cccccc;"> <img src="../../web images/header.png" colspan="2"/></td>
  </tr>
  <tr align="left">
    <th align="left" height="100" width="100" style="background:#ffffff;">Auf Wierdshen</th>
     <th height="100" width="100" style="background:#ffffff;">Auf Wierdshen</th>
  </tr>
</table>
</body>

**JeremyMiller** · 06-07-2007, 03:56 PM

Oh, I made a typo and put the colspan on the image instead of the TD. This will correct that:

HTML Code:

<body bgcolor="#ffffff">
<table bgcolor="#cccccc" cellspacing="10" style="border: solid 3px black;">
  <tr>
    <td style="padding-bottom:5px; background-color:#cccccc;" colspan="2"> <img src="../../web images/header.png" /></td>
  </tr>
  <tr align="left">
    <th align="left" height="100" width="100" style="background:#ffffff;">Auf Wierdshen</th>
     <th height="100" width="100" style="background:#ffffff;">Auf Wierdshen</th>
  </tr>
</table>
</body>

**Noobstein** · 06-07-2007, 03:57 PM

^^Got it. Col=3 had to go into the first td like you were saying. Big thanks guys. I'll re-read what u guys were telling me so I understand it a little better.