Look at this piece of code

<table cellspacing=5 align=center>
<tr>
<td><a href="dxmas0044.jpg"><img src="sqdxmas0044.jpg" border=0></a>
<td><a href="dxmas0045.jpg"><img src="sqdxmas0045.jpg" border=0></a>
<td><a href="dxmas0047.jpg"><img src="sqdxmas0047.jpg" border=0></a>
</tr><tr align=center>
<td colspan=1.5><a href="dxmas0048.jpg"><img src="sqdxmas0048.jpg"
border=0></a>
<td colspan=1.5><a href="dxmas0049.jpg"><img src="sqdxmas0049.jpg"
border=0></a>
</tr></table>

Unfortunately colspan=1.5 doesn't work
If I replace the first one with colspan=2 then the first image sits
underneath the middle/join of images 1 and 2 above it, but the
folowing is squarely underneath image 3 of the above row

I basically want to do within the same table (I knw I could do it in
more than one table, or with no table at all)an image alignment like
below

 1   2   3 
   4   5

Or is the only way to do this to have 5 columns and put nothing in
columns 2 and 4 in the first row and nothing in columns 1, 3 and 5 in
the second ?

Thanks

---

Clarification of Question by wolvies-ga on 20 Sep 2003 08:27 PDT

The latter suggestion of mine of course works only if there is space
on the screen to have 5 columns. The whole point is that the screen
only fits 3 columns, so on alternating rows I want 3 on one row, then
2 on the next etc.

wolvies, lol

Hi there wolvies,

Technically, it is possible to solve your problem using only one
table. Although, browsers don't like the idea of rows that don't line
up perfectly with other rows in the same table. Which means you will
probably get some funny looking results if you display this code in
your browser:


<table border="0" align="center" cellspacing="5">
  <tr> 
    <td colspan="33%" align="center"><a href="dxmas0044.jpg"><img
src="sqdxmas0044.jpg" border=0></a></td>
    <td colspan="33%" align="center"><a href="dxmas0045.jpg"><img
src="sqdxmas0045.jpg" border=0></a></td>
    <td colspan="33%" align="center"><a href="dxmas0047.jpg"><img
src="sqdxmas0047.jpg" border=0></a></td>
  </tr>
  <tr> 
    <td colspan="50%" align="center"><a href="dxmas0048.jpg"><img
src="sqdxmas0048.jpg"
border=0></a></td>
    <td colspan="50%" align="center"><a href="dxmas0049.jpg"><img
src="sqdxmas0049.jpg"
border=0></a></td>
  </tr>
</table>


As you can see, instead of using a colspan of 1.5, I used percentages,
and chose 50%, which will cause it to span half of the table. In the
row with 3 cells, I used a colspan of 33% (Since 3 x 33 = 99, which is
as close as you can get to 100%, which is what your browser wants) Try
using this code, it may work for you, but most likely it will have
alignment issues.

The proper way to do such a thing would be to have a table with 5
columns, or use multiple tables, as you already mentioned. I have
written out the code for you to try.

Table with 5 columns:


<table border="0" align="center">
  <tr>
    <td><a href="dxmas0044.jpg"><img src="sqdxmas0044.jpg"
border=0></a></td>
    <td>&nbsp;</td>
    <td><a href="dxmas0045.jpg"><img src="sqdxmas0045.jpg"
border=0></a></td>
    <td>&nbsp;</td>
    <td><a href="dxmas0047.jpg"><img src="sqdxmas0047.jpg"
border=0></a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><a href="dxmas0048.jpg"><img src="sqdxmas0048.jpg"
border=0></a></td>
    <td>&nbsp;</td>
    <td><a href="dxmas0049.jpg"><img src="sqdxmas0049.jpg"
border=0></a></td>
    <td>&nbsp;</td>
  </tr>
</table>



Multiple tables:


<table border="0" align="center">
  <tr>
    <td width="111"><table width="100%" border="0">
        <tr>
          <td align="center"><a href="dxmas0044.jpg"><img
src="sqdxmas0044.jpg" border=0></a></td>
          <td align="center"><a href="dxmas0045.jpg"><img
src="sqdxmas0045.jpg" border=0></a></td>
          <td align="center"><a href="dxmas0047.jpg"><img
src="sqdxmas0047.jpg" border=0></a></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="center"><table border="0">
        <tr>
          <td align="center"><a href="dxmas0048.jpg"><img
src="sqdxmas0048.jpg"
border=0></a></td>
          <td align="center"><a href="dxmas0049.jpg"><img
src="sqdxmas0049.jpg"
border=0></a></td>
        </tr>
      </table></td>
  </tr>
</table>


Hopefully one of these works for you. The multiple table version might
be a better choice if the one with 5 columns does not fit on your
screen. Please let me know if you have any problems with the code I
provided.

Thanks for using Google Answers!

Ah that works perfectly !!! Thats the 33% for the 3-picture rows and
the 50% for the 2 picture rows. Thank you very much !
You are correct, the 1-3-5 and 2-4 solution doesn't work for images
because you run out of screen and have the deadly scroll bar at the
bottom
The multi table solution works fine, but always seemed inelegant and
to have more code than was necessary

Thanks very much for the percentages !

wolvies, lol

Thanks so much for the 5-star rating and generous tip! You've made my day.