Log in

View Full Version : no more tables


chechu
11-16-2006, 05:29 PM
Someone told me there where too many table tags in this code. How do I replace them using CSS ?


<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function clearDefault(el) {
if (el.defaultValue==el.value) el.value = ""
}
</script>

</head>

<body background="bgpalet.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="80%" height="100%" border="0" cellpadding="0" cellspacing="0" align=right>
<tr><td align="center" valign="middle">

<table border="0" width=100% align=right>
<tr><td width="120" valign="middle">

</td><td valign="middle" align="right">

<FORM NAME="form1" METHOD="post" ACTION="contact.php">

<table width="100%" valign="top" align=center>
<tr><td>
<table width=100%>
<tr><td align=left>
<INPUT TYPE=TEXT NAME="name" VALUE="your name" onFocus="clearDefault(this)" style="border:1px solid #666666; width:190px">
</td></tr>
<tr><td align=left>
<INPUT TYPE=TEXT NAME="email" VALUE="your e-mail" onFocus="clearDefault(this)" style="border:1px solid #666666; width:190px">
</td></tr></table>
</td><td width=20>
&nbsp</td><td align=left valign=middle>
<INPUT TYPE="image" src="emailgo.jpg" NAME="submit" VALUE="go" style="border: 0px">
</td></tr></table>

<table width="100%" valign="top" align=center>
<tr><td align=right>
<TEXTAREA NAME="message" style="border:1px solid #666666; width:265px; height:120px">
</TEXTAREA>
</td></tr></table>


</FORM>

</td></tr></table>
</td></tr></table>

</body>
</html>
mwinter
11-17-2006, 04:09 AM
Someone told me there where too many table tags in this code. How do I replace them using CSS ?

It would be nice to know exactly how the document is supposed to appear. The attached image is what I see (albeit reduced to satisfy the forum software), which seems to have far too much empty space to be correct.

Mike
codeexploiter
11-17-2006, 04:17 AM
The following are some links that describes the tableless layout using CSS

From W3C (http://www.w3.org/2002/03/csslayout-howto)
Glish (http://www.glish.com/css/)
Davespicks (http://davespicks.com/essays/notables.html)
CSS Drive (http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/) - This one something similar to your requirement
chechu
11-17-2006, 10:41 AM
Thanks for the links. I will make the best of it.
When you look at the screenshot, it looks weird indeed. But in the <iframe> where it appears, it looks fine ... Anyway, I'll give it a try.
So in general: no more using tables and replacing all of them by css, or just with specific coding ?