Jump to content

Are multiple forms allowed inside a single table?


boltonw
 Share

Recommended Posts

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

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...