There are too many times when I feel like a table is just easier. The problem I have been having is with forms. I have a few forms on some sites that are styled with CSS, but then I start trying to get complicated, having more than one form on the page side by side it seems like tables would just be easier. Does anyone use a table to at least create the two sections for a side by side form? Any tips on how to doside by sides?
You mean something like this? (Bear in mind the HTML and CSS code is out-dated, and will be re-written from scratch for an upcoming article I'm writing for Search This.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS Based Form Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #FFF; color: #000; font-family: "Times New Roman", Times, serif; padding: 1em; } h1 { font-family: Georgia, Garamond, "Times New Roman", Times, serif; margin-bottom: 0.25em; } #exampleForm { padding: 0.5em 0; } #about { float: left; margin-right: 1em; width: 28em; } #survey { float: left; width: 22em; } #controls { clear: left; } fieldset { border: 1px solid #000; display: block; margin-bottom: 0.5em; padding: 0 0 0.25em 0.5em; } #tell-us { padding-top: 0.25em; padding-bottom: 0.5em; } fieldset div { padding: 0.25em 0 0 0; } legend { background: #EEE; color: #00C; border: 1px solid #000; padding: 0 0.25em; } label { margin: 0.25em 0; } #about label { clear: left; float: left; width: 12em; } #browsers label { margin: 0; width: auto; } #browsers label:hover { background: #FFF; color: #00F; font-weight: bold; } #poll label { margin: 0; width: 10em; } #poll label:hover { background: #FFF; color: #00F; font-weight: bold; } input { margin: 0.25em 0; } #browsers input { margin: 0; vertical-align: middle; } #poll input { margin: 0 0.25em 0 0; } #submit, #reset { clear: left; float: none; margin-left: 0; width: 8em; } textarea { background: #EEE; color: inherit; display: block; margin: 0 auto; padding: 0.5em; overflow: auto; width: 90%; } </style> </head> <body> <h1>Semantic Forms with (X)HTML and CSS</h1> <form id="exampleForm" method="post" action="#"> <div id="about"> <fieldset id="basicInfo"> <legend>Basic Information</legend> <label for="name">Your Name:</label> <input id="name" type="text" size="30" /><br /> <label for="email">Your Email Address:</label> <input id="email" type="text" size="30" /> </fieldset> <fieldset id="favorites"> <legend>Favorite Things</legend> <label for="favorite-animal">What is your favorite animal?</label> <input id="favorite-animal" type="text" size="30" /><br /> <label for="favorite-sport">What is your favorite sport?</label> <input id="favorite-sport" type="text" size="30" /><br /> <label for="favorite-food">What is your favorite food?</label> <input id="favorite-food" type="text" size="30" /> </fieldset> <fieldset id="tell-us"> <legend>Tell Us About Yourself</legend> <div> <textarea rows="10" cols="40"></textarea> </div> </fieldset> </div> <div id="survey"> <fieldset id="browsers"> <legend>What browsers are installed on your computer?</legend> <div> <label for="msie"><input id="msie" type="checkbox" name="browser" value="Microsoft" /> Internet Explorer</label><br /> <label for="netscape"><input id="netscape" type="checkbox" name="browser" value="Netscape" /> Netscape Browser</label><br /> <label for="mozilla"><input id="mozilla" type="checkbox" name="browser" value="Mozilla" /> Mozilla FireFox</label><br /> <label for="opera"><input id="opera" type="checkbox" name="browser" value="Opera" /> Opera Web Browser</label><br /> <label for="konqueror"><input id="konqueror" type="checkbox" name="browser" value="Konqueror" /> Konqueror KDE</label><br /> <label for="safari"><input id="safari" type="checkbox" name="browser" value="Apple" /> Safari Web Browser</label><br /> <label for="another-browser"><input id="another-browser" type="checkbox" name="browser" value="Other" /> Something Else</label> </div> </fieldset> <fieldset id="poll"> <legend>What do you use to build your Web sites?</legend> <div> <label for="golive"><input id="golive" name="editor" type="radio" value="Adobe GoLive" /> Adobe GoLive</label><br /> <label for="dreamweaver"><input id="dreamweaver" name="editor" type="radio" value="Macromedia Dreamweaver" /> Macromedia Dreamweaver</label><br /> <label for="frontpage"><input id="frontpage" name="editor" type="radio" value="Microsoft FrontPage" /> Microsoft FrontPage</label><br /> <label for="hand"><input id="hand" name="editor" type="radio" value="A Text Editor" /> Text Editor</label><br /> <label for="other"><input id="other" name="editor" type="radio" value="Other" /> Something Else</label> </div> </fieldset> </div> <div id="controls"> <input id="submit" type="submit" value="Submit Form" /> <input id="reset" type="reset" value="Clear Form" /> </div> </form> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </body> </html> Code (markup):
A lot of people feel more comfortable using tables instead of css for layout—especially for forms. That's because they have more experience with tables and css is a powerful presentation language that requires a bit more effort to achieve competence. form { float: left; width: 300px; } ========= <form action="#" method="get" id="form1"> <fieldset> <legend>form 1</legend> <label for="name"><input type="text" name="name" /></label> <input type="submit" /> </fieldset> </form> <form action="#" method="get" id="form2"> <fieldset> <legend>form 1</legend> <label for="name"><input type="text" name="name" /></label> <input type="submit" /> </fieldset> </form> Code (markup): You may work a form into your layout as you would any block level element. The same goes for the interior layout of the form with the difference being that form controls are mostly inline elements. See Form layout using css for an example. cheers, gary
You'll also want to look at Legends of Style (Tyssen Design) for tips on styling fieldsets and legends (which I will be citing as a resource in the article).
Thanks! I have not used tables on anything else on the site and on a few forms I have gone with CSS. Just one bigger forms I went back to tables until I had a little better understanding. Thanks for all the links and comments.