DIV CSS布局网页实例：简单表单form标准化实例

form无论是在网站的制作中，还是在网站的重构中，我们都会频繁地“碰面”，当“碰面”的次数多了，反而觉得他更让人迷茫，有种熟悉的“陌生”，越来越把握不了他。
下面我们将带大家走进form的世界，一起来熟悉、探讨、掌握他的“脾性”。
对于简单form的设计图（如图一，yahoo注册页面的一部分），我们如何来做整体的布局呢？大体我们可以选用以下3种方式来做布局：
1、使用table来布局
这是大家最常用的方法，虽然现在到处都在谈标准化，甚至更多的在说div+css，但怿飞还是推荐大家使用table来布局form。对于标准，个人的另类理解“更符合逻辑，更效率快捷”。
为什么推荐大家使用呢？table本就是用来显示二维数据，用table来布局form可以说是他的“老本行”。另外重要的一点是，对于复杂的form，table能更有效的进行布局和维护修改，体现了效率和易用。
在布局之前，先温习一下table的部分标签：
table：显示二维数据
summary：定义表格的用途
caption：定义表格的标题，在表格开始的地方使用，仅一次
tr：表格中的一行
th：表头单元格，定义一行或者一列的表头信息
td：数据单元格
下面我们具体来对图一的设计图进行整体布局：
<form id="demoform" class="democss" action="">
<table summary="使用table来布局的演示" id="demo">
<caption>
Registration example form
</caption>
<tr>
<th><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></th>
<td><input type="text" id="fname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></th>
<td><input type="text" id="lname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></th>
<td>
<select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
第 1 2 3 4 5 6 7 8 页