Many page layout problems appear to require tables. Some clever use of the CSS3 float can help elements with multiple columns without the overhead of tables. Forms cause a particular headache because a form often involves labels in a left column followed by input elements in the right column.
You'd probably be tempted to put such a form in a table. Adding table tags makes the HTML much more complex and isn't required. It's much better to use CSS to manage the layout.
You can float elements to create attractive forms without requiring tables.
As page design gets more involved, it makes more sense to think of the HTML and the CSS separately. The HTML will give you a sense of the overall intent of the page, and the CSS can be modified separately. Using external CSS is a natural extension of this philosophy. Begin by looking at floatForm.html and concentrate on the HTML structure before worrying about style:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>floatForm.html</title>
<link rel = "stylesheet"
type = "text/css"
href = "floatForm.css" />
</head>
<body>
<form action = ">
<fieldset>
<label>Name</label>
<input type = "text"
id = "txtName" />
<label>Address</label>
<input type = "text"
id = "txtAddress" />
<label>Phone</label>
<input type = "text"
id = "txtPhone" />
<button type = "button">
submit request
</button>
</fieldset>
</form>
</body>
</html>
While you look over this code, note several interesting things about how the page is designed:
The CSS is external. CSS is defined in an external document. This makes it easy to change the style and helps you to focus on the HTML document in isolation.
The HTML code is minimal. The code is very clean. It includes a form with a . The contains labels, elements, and a .
There isn't a table. There's no need to add a table as an artificial organization scheme. A table wouldn't add to the clarity of the page. The form elements themselves provide enough structure to allow all the formatting you need.
Labels are part of the design. You can use the label element throughout the form, giving you an element that can be styled however you wish.
Everything is selectable. You’ll want to apply one CSS style to labels, another to input elements, and a third style to the button. You can set up the HTML so you can use CSS selectors without requiring any id or class attributes.
There's a button. You can use a button element instead of on purpose. This way, you can apply one style to all the button elements and a different style to the element.
Designing a page like this one so its internal structure provides all the selectors you need is wonderful. This keeps the page very clean and easy to read. Still, don't be afraid to add classes or IDs if you need them.
It's often a good idea to look at your page with straight HTML before you start messing around with CSS.
If you have a page with styles and you want to see how it will look without the style rules, use Chrome developer tools or Firebug. You can temporarily disable some or all CSS style rules to see the default content underneath. This can sometimes be extremely handy.