boltonw Posted July 19, 2008 Share Posted July 19, 2008 Hi,I recently took over a partially developed site that is based on tables. The owner is very particular about the fonts used in the site, so I made most of the pages as images and sliced them up for tables to display. I then made some of the cells active by making them buttons/links to other cgi based pages.My current efforts seem to work just fine, but of course the Validator pukes when it comes across the multiple forms in a table.I plan on redoing the site with CSS after the site is up and running, but need to get the thing published soon. I tried to split the table into multiples each with a separate form, but the formatting just blew up.Here is what I using and that fails Validation. I need to have two different targets as I need one for the vertically oriented images and one for the horizontal images.link to site: http://www.williambolton.com/tgw/nouveau.htmlThanks for your assistance.BBB <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>The Gone World - Art Nouveau Prints</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body bgcolor="#00004E"><form name="input" action="http://www.esplanadeweb.com/cgi/detailc.cgi" method="post"><input type="hidden" name="page" value="nouveau"><table id="Table_01" width="917" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="14"> <a href="index.html"> <img src="images/nouveau_text_01.jpg" width="916" height="108" border="0" alt="Home of The Gone World"></a></td> <td> <img src="images/spacer.gif" width="1" height="108" alt=""></td> </tr> <tr> <td rowspan="14"> <img src="images/nouveau_text_02.jpg" width="90" height="1500" alt=""></td> <td colspan="2"> <a href="nouveau.html"> <img src="images/nouveau_text_03.jpg" width="146" height="39" border="0" alt="Art Nouveau"></a></td> <td colspan="2"> <a href="deco.html"> <img src="images/nouveau_text_04.jpg" width="145" height="39" border="0" alt="Art Deco"></a></td> <td colspan="2"> <a href="surreal.html"> <img src="images/nouveau_text_05.jpg" width="146" height="39" border="0" alt="Surrealist Art"></a></td> <td colspan="4"> <a href="arts.html"> <img src="images/nouveau_text_06.jpg" width="145" height="39" border="0" alt="Arts & Crafts"></a></td> <td colspan="2"> <a href="about.html"> <img src="images/nouveau_text_07.jpg" width="146" height="39" border="0" alt="About The Gone World"></a></td> <td rowspan="14"> <img src="images/nouveau_text_08.jpg" width="98" height="1500" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="39" alt=""></td> </tr> <tr> <td colspan="12"> <img src="images/nouveau_text_09.jpg" width="728" height="317" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="317" alt=""></td> </tr> <tr> <td rowspan="10"> <img src="images/nouveau_text_10.jpg" width="90" height="1045" alt=""></td> <td colspan="2"> <INPUT type="image" src="images/nouveau_final_11.jpg" alt="" name="onotoaeroplane_green"></td> <td colspan="2" rowspan="7"> <img src="images/nouveau_text_12.jpg" width="51" height="802" alt=""></td> <td colspan="2"> <INPUT type="image" src="images/nouveau_final_13.jpg" alt="" name="onototrain_maroon"></td> <td colspan="2" rowspan="7"> <img src="images/nouveau_text_14.jpg" width="52" height="802" alt=""></td> <td colspan="2"> <INPUT type="image" src="images/nouveau_final_15.jpg" alt="" name="lequel_cobalt"></td> <td rowspan="10"> <img src="images/nouveau_text_16.jpg" width="22" height="1045" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="212" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/nouveau_text_17.jpg" width="171" height="48" alt=""></td> <td colspan="2"> <img src="images/nouveau_text_18.jpg" width="171" height="48" alt=""></td> <td colspan="2"> <img src="images/nouveau_text_19.jpg" width="171" height="48" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="48" alt=""></td> </tr> <tr> <td colspan="2"> <INPUT type="image" src="images/nouveau_final_18.jpg" alt="" name="inconnu_cobalt"></td> <td colspan="2"> <INPUT type="image" src="images/nouveau_final_20.jpg" alt="" name="paris-tailleur_violet"></td> <td colspan="2"> <INPUT type="image" src="images/nouveau_final_22.jpg" alt="" name="auto_sepia"></td> <td> <img src="images/spacer.gif" width="1" height="213" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/nouveau_text_23.jpg" width="171" height="48" alt=""></td> <td colspan="2"> <img src="images/nouveau_text_24.jpg" width="171" height="48" alt=""></td> <td colspan="2"> <img src="images/nouveau_text_25.jpg" width="171" height="48" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="48" alt=""></td> </tr> <tr> <td colspan="2"> <INPUT type="image" src="images/nouveau_final_24.jpg" alt="" name="onotosoldiers_green"></td> <td colspan="2"> <INPUT type="image" src="images/nouveau_final_26.jpg" alt="" name="comprimes_violet"></td> <td colspan="2"> <INPUT type="image" src="images/nouveau_final_28.jpg" alt="" name="orsay_maroon"></td> <td> <img src="images/spacer.gif" width="1" height="212" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/nouveau_text_29.jpg" width="171" height="43" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/nouveau_text_30.jpg" width="171" height="69" alt=""></td> <td colspan="2"> <img src="images/nouveau_text_31.jpg" width="171" height="43" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="43" alt=""></td> </tr> <tr> <td colspan="2" rowspan="3"> <INPUT type="image" src="images/nouveau_final_30.jpg" alt="" name="byrrhkids_green"></td> <td colspan="2" rowspan="3"> <INPUT type="image" src="images/nouveau_final_32.jpg" alt="" name="benedictine_cobalt"></td> <td> <img src="images/spacer.gif" width="1" height="26" alt=""></td> </tr></form><form name="input" action="http://www.esplanadeweb.com/cgi/detaild.cgi" method="post"><input type="hidden" name="page" value="nouveau"> <tr> <td rowspan="3"> <img src="images/nouveau_text_34.jpg" width="30" height="243" alt=""></td> <td colspan="4"> <INPUT type="image" src="images/nouveau_final_34.jpg" alt="" name="jeumont_maroon"></td> <td rowspan="3"> <img src="images/nouveau_text_36.jpg" width="31" height="243" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="171" alt=""></td> </tr> <tr> <td colspan="4" rowspan="2"> <img src="images/nouveau_text_37.jpg" width="213" height="72" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="16" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/nouveau_text_38.jpg" width="171" height="56" alt=""></td> <td colspan="2"> <img src="images/nouveau_text_39.jpg" width="171" height="56" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="56" alt=""></td> </tr> <tr> <td colspan="2"> <a href="nouveau.html"> <img src="images/nouveau_text_40.jpg" width="146" height="43" border="0" alt="Art Nouveau"></a></td> <td colspan="2"> <a href="deco.html"> <img src="images/nouveau_text_41.jpg" width="145" height="43" border="0" alt="Art Deco"></a></td> <td colspan="2"> <a href="surreal.html"> <img src="images/nouveau_text_42.jpg" width="146" height="43" border="0" alt="Surrealist Art"></a></td> <td colspan="4"> <a href="arts.html"> <img src="images/nouveau_text_43.jpg" width="145" height="43" border="0" alt="Arts & Crafts"></a></td> <td colspan="2"> <a href="about.html"> <img src="images/nouveau_text_44.jpg" width="146" height="43" border="0" alt="About The Gone World"></a></td> <td> <img src="images/spacer.gif" width="1" height="43" alt=""></td> </tr> <tr> <td colspan="12"> <img src="images/nouveau_text_45.jpg" width="728" height="56" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="56" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="90" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="56" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="115" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="30" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="21" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="125" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="46" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="21" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="31" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="47" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="124" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="22" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="98" height="1" alt=""></td> <td></td> </tr></form></table></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted July 19, 2008 Share Posted July 19, 2008 I can't say much, but I see right off that opening a form before you open the table and then closing it inside the table will get your validator angry. I'm not sure, but having content in your table between <tr> elements might also be a no-no.As long as you must use tables (I shudder at the thought, but you said you're stuck with it, right?) consider a structure that nests 2 tables inside one larger, wrapper table. It might look like this: <table> <tr> <td> <form> <table> CONTENT AREA 1: Form elements, images, text, etc. </table> </form> </td> </tr> <tr> <td> <form> <table> CONTENT AREA 2: Form elements, images, text, etc. </table> </form> </td> </tr> </table> This way, every element is logically subsumed into some other element. If the forms need to be side by side, this can easily be adapted. Visually, if the wrapper table and its cells have no cellspacing, cellpadding, or borders, then the wrapper table will not be noticed by the user. Link to comment Share on other sites More sharing options...
boltonw Posted July 20, 2008 Author Share Posted July 20, 2008 I can't say much, but I see right off that opening a form before you open the table and then closing it inside the table will get your validator angry. I'm not sure, but having content in your table between <tr> elements might also be a no-no.As long as you must use tables (I shudder at the thought, but you said you're stuck with it, right?) consider a structure that nests 2 tables inside one larger, wrapper table. It might look like this: (snip)This way, every element is logically subsumed into some other element. If the forms need to be side by side, this can easily be adapted. Visually, if the wrapper table and its cells have no cellspacing, cellpadding, or borders, then the wrapper table will not be noticed by the user.Thanks! I will give it a try and see what happens. BBB Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.