Google Answers Logo
View Question
 
Q: HTML Question - working equivalent to colspan=1.5 ? ( Answered 5 out of 5 stars,   1 Comment )
Question  
Subject: HTML Question - working equivalent to colspan=1.5 ?
Category: Computers > Internet
Asked by: wolvies-ga
List Price: $5.00
Posted: 20 Sep 2003 08:20 PDT
Expires: 20 Oct 2003 08:20 PDT
Question ID: 258530
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
Answer  
Subject: Re: HTML Question - working equivalent to colspan=1.5 ?
Answered By: directrix-ga on 20 Sep 2003 09:40 PDT
Rated:5 out of 5 stars
 
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!
wolvies-ga rated this answer:5 out of 5 stars and gave an additional tip of: $5.00
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

Comments  
Subject: Re: HTML Question - working equivalent to colspan=1.5 ?
From: directrix-ga on 20 Sep 2003 11:00 PDT
 
Thanks so much for the 5-star rating and generous tip! You've made my day.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  


Google Home - Answers FAQ - Terms of Service - Privacy Policy