一直有种说法：table用于数据表，对于复杂表单，table也是最好的选择，由于一直没有遇见过也就没有认真去研究，到底复杂表单是否应该使用table。

好了，机会来了，我拿着复杂表单的图样，看来看去都觉得不应该用table呀，除非是有行标和列标的数据表表单。反而类似于登陆这种简单表单，我倒是一直使用table，理由是能够在纯文档的时候对齐文本与输入框，但是对于复杂表单就不一样了，复杂表单涉及到页面布局了。

为什么要研究？因为我希望程序员不要涉及到界面的任何部分，对于页面，他只需要关注结构，而复杂表单如果采用table，很容易就将程序员带进对布局的操作中去。

好，经过一阵艰苦奋斗，还算好，xhtml部分自己觉得还算摸清了一些规律，页面的分析信手捻来，div结构下的复杂表单真是漂亮，但是但是……css部分……我靠，真是难搞，干了几个复杂表单的css都没摸清规律，太JB麻烦了，尤其是文本长度不一致，表单控件又各种各样交错，还有错误提示隐藏的文本，时不时中间又加个按钮……迷茫了……算了，继续干css，希望最后能得出结论，对于复杂表单到底用table还是div?

先给一个对于登陆界面这样简单的表单，我最常用的xhtml代码，使用table，理由见上：

1. <div> 
2.     <h3><span>用户登陆</span></h3> 
3.     <table> 
4.         <tr> 
5.             <td><label for="name">用户名</label></td> 
6.             <td><input id="name" /> 
7.         </tr> 
8.         <tr> 
9.             <td><label for="pw">密码</label></td> 
10.             <td><input id="pw" /></td> 
11.         </tr> 
12.     </table> 
13.     <p><button /></p> 
14. </div> 

另外不使用table的如下：

1. <div> 
2.     <h3><span>用户登陆</span></h3> 
3.     <div> 
4.        <label for="name">用户名</label> 
5.        <input id="name" /> 
6.     </div> 
7.     <div> 
8.         <label for="pw">密码</label> 
9.         <input id="pw" /> 
10.     </div> 
11.     <p><button /></p> 
12. </div> 

怎么说呢？第一种我视这样的简单表单为2行2列数据，用了table。第二种则是div模块化操作。一般我都使用第一种，除非文本长度一样（比如姓名，密码）才用第二种。当然我觉得第二种是正确的，所以我会优先在文案上先做文章使之长度一致。为什么？因为只有模块化，才能固定xhtml而通过css随意布局，比如形式上为一行四列之时，第一种就做不到（其实FF可以正确解释对tr的浮动操作，例如2列tr，但是ie不支持，一个tr怎么都得占table的一行。）。

好了，复杂表单的图样和xhtml部分在公司，明天上班发上，现在睡觉问梦去。

这份表单够份量不？

这里是xhtml部分，做了些必要的删除，没破坏结构就好了。留意我补充的部分，比如h2、h3。

1. <h1>大便蛔虫的表单标题</h1> 
2. <div> 
3.     <h2>导航</h2> 
4.     <div> 
5.         <button>新增</button> 
6.         <button>刷新</button> 
7.     </div> 
8.     <div> 
9.         <h3>当前批次采用的标准为</h3> 
10.         <div> 
11.             <label>本人补贴</label> 
12.             <asp:label id="" Runat="server"></asp:label> 
13.         </div> 
14.         <div> 
15.             <label>本人工龄补贴</label> 
16.             <asp:label id="" Runat="server"></asp:label> 
17.         </div> 
18.         <div> 
19.             <label>配偶补贴</label> 
20.             <asp:label id="" Runat="server"></asp:label> 
21.         </div> 
22.         <div> 
23.             <label>配偶工龄补贴</label> 
24.             <asp:label id="" Runat="server"></asp:label> 
25.         </div> 
26.         <div> 
27.             <label>特殊补贴</label> 
28.             <asp:label id="" Runat="server"></asp:label> 
29.         </div> 
30.     </div> 
31.     <iewc:treeview id="" ExpandLevel="1" runat="server" AutoPostBack="True"></iewc:treeview> 
32. </div> 
33. <div> 
34.     <h2>表单内容</h2> 
35.     <div> 
36.         <h3>申请人信息</h3> 
37.         <div> 
38.             <label>本人姓名</label> 
39.             <asp:textbox id="" Runat="server"></asp:textbox> 
40.         </div> 
41.         <div> 
42.             <label>身份证号码</label> 
43.             <asp:textbox id="" Runat="server"></asp:textbox> 
44.         </div> 
45.         <div> 
46.             <label>本人工龄（年）</label> 
47.             <asp:textbox id="" Runat="server"></asp:textbox> 
48.             <asp:regularexpressionvalidator id="REVY" runat="server" Display="Dynamic" ValidationExpression="\d{0,2}" ErrorMessage="必须输入整数" 
49.         ControlToValidate="txt_WorkAge"></asp:regularexpressionvalidator> 
50.         </div> 
51.         <div> 
52.             <label>工作单位</label> 
53.             <asp:label id="" Runat="server"></asp:label> 
54.         </div> 
55.         <div> 
56.             <label>职务或职称</label> 
57.             <asp:textbox id="" Runat="server"></asp:textbox> 
58.         </div> 
59.     </div> 
60.     <div class="personinfo"> 
61.         <h3>现住房信息</h3> 
62.         <div> 
63.             <label>现住房地址</label> 
64.             <asp:textbox id="" Runat="server"></asp:textbox> 
65.         </div> 
66.         <div> 
67.             <label>建筑面积（平方米）</label> 
68.             <asp:textbox id="" Runat="server"></asp:textbox> 
69.         </div> 
70.         <div> 
71.             <label>其中个人按市场价自购面积（平方米）</label> 
72.             <asp:textbox id="" Runat="server"></asp:textbox> 
73.         </div> 
74.         <div> 
75.             <label>现住房性质</label> 
76.             <asp:textbox id="" Runat="server"></asp:textbox> 
77.         </div> 
78.         <div> 
79.             <label>补贴住房面积标准（平方米）</label> 
80.             <asp:textbox id="" Runat="server"></asp:textbox> 
81.         </div> 
82.         <div> 
83.             <label>申请住房补贴理由</label> 
84.             <asp:dropdownlist id="" Runat="server"></asp:dropdownlist> 
85.         </div> 
86.         <div> 
87.             <label>申请住房补贴标准</label> 
88.             <asp:radiobuttonlist id="" runat="server" RepeatDirection="Horizontal"> 
89.                 <asp:ListItem>无房户一次性补贴</asp:ListItem> 
90.                 <asp:ListItem>一次性补面积差</asp:ListItem> 
91.             </asp:radiobuttonlist> 
92.         </div> 
93.     </div> 
94.     <div> 
95.         <h3>配偶信息</h3> 
96.         <div> 
97.             <label>配偶姓名</label> 
98.             <asp:textbox id="" Runat="server"></asp:textbox> 
99.         </div> 
100.         <div> 
101.             <label>配偶身份证号码</label> 
102.             <asp:textbox id="" Runat="server"></asp:textbox> 
103.         </div> 
104.         <div> 
105.             <label>配偶工龄</label> 
106.             <asp:textbox id="" Runat="server"></asp:textbox>年 
107.             <asp:regularexpressionvalidator id="" runat="server" Display="Dynamic" ValidationExpression="\d{0,2}" ErrorMessage="必须输入整数" 
108.             ControlToValidate=""></asp:regularexpressionvalidator> 
109.         </div> 
110.         <div> 
111.             <label>配偶工作单位</label> 
112.             <asp:textbox id="" Runat="server"></asp:textbox> 
113.         </div> 
114.         <div> 
115.             <label>职务或职称：</label> 
116.             <asp:textbox id="" Runat="server"></asp:textbox> 
117.         </div> 
118.     </div> 
119.     <div> 
120.         <h3>享受住房分配或货币补贴情况</h3> 
121.         <div> 
122.             <label>（１）已享受房改购房面积（平方米）</label> 
123.             <asp:textbox id="" Runat="server"></asp:textbox> 
124.         </div> 
125.         <div> 
126.             <label>（２）已享受购房补贴（元）</label> 
127.             <asp:textbox id="" Runat="server"></asp:textbox> 
128.         </div> 
129.         <div> 
130.             <label>（３）已享受住房补贴（元）</label> 
131.             <asp:textbox id="" Runat="server"></asp:textbox> 
132.         </div> 
133.         <div> 
134.             <asp:button id="" Text="计算" Runat="server"></asp:button> 
135.             <label>本次补贴面积（平方米）</label> 
136.             <cc1:acceptnumber id="" runat="server"></cc1:acceptnumber> 
137.         </div> 
138.     </div> 
139.     <div> 
140.         <h3>住房补贴</h3> 
141.         <div> 
142.             <label>本人补贴（元）</label> 
143.             <asp:textbox id="" Runat="server"></asp:textbox> 
144.         </div> 
145.         <div> 
146.             <label>本人工龄补贴（元）</label> 
147.             <asp:textbox id="" Runat="server"></asp:textbox> 
148.         </div> 
149.         <div> 
150.             <label>配偶补贴（元）</label> 
151.             <asp:textbox id="" Runat="server"></asp:textbox> 
152.         </div> 
153.         <div> 
154.             <label>配偶工龄补贴（元）</label> 
155.             <asp:textbox id="" Runat="server"></asp:textbox> 
156.         </div> 
157.         <div> 
158.             <label>特殊补贴（元）</label> 
159.             <asp:textbox id="" Runat="server"></asp:textbox> 
160.         </div> 
161.         <div> 
162.             <label>合计（元）</label> 
163.             <asp:textbox id="" Runat="server"></asp:textbox> 
164.         </div> 
165.         <div> 
166.             <label>实际发放补贴（元）</label> 
167.             <asp:textbox id="" Runat="server"></asp:textbox> 
168.         </div> 
169.     </div> 
170.     <div> 
171.         <h3>请申请人根据不同情况填写</h3> 
172.         <div> 
173.             <label>现购房地址</label> 
174.             <asp:textbox id="" Runat="server"></asp:textbox> 
175.         </div> 
176.         <div> 
177.             <label>售房单位</label> 
178.             <asp:textbox id="" Runat="server"></asp:textbox> 
179.         </div> 
180.         <div> 
181.             <label>偿还贷款帐号</label> 
182.             <asp:textbox id="" Runat="server"></asp:textbox> 
183.         </div> 
184.         <div> 
185.             <label>贷款银行</label> 
186.             <cc1:xmldropdownlist id="" runat="server" XmlNodeName="" XmlPath=""></cc1:xmldropdownlist> 
187.         </div> 
188.         <div> 
189.             <label>本人公积金存储号</label> 
190.             <asp:textbox id="" Runat="server"></asp:textbox> 
191.         </div> 
192.     </div> 
193.     <div> 
194.         <asp:button id="" Text="保存" runat="server" CssClass="button"></asp:button> 
195.         <asp:Button id="" Text="退回" runat="server" CssClass="button"></asp:Button> 
196.         <asp:Button id="" Text="删除" runat="server" CssClass="button"></asp:Button> 
197.         <button id="" onclick="javascript:window.close();">关闭</button> 
198.     </div> 
199. </div> 

再补充一个，这里有两个部分很明显的表格结构，所以在那里使用了table，而其他部分没有用。

table部分xhtml。css部分还没琢磨出来规律，结论没有，继续琢磨，不过感觉没有用table结构很漂亮也很灵活，但是css确实让人头大，权衡得失中，再补充了。

1. <div class="personinfo"> 
2.                 <h2><span>个人信息</span></h2> 
3.                 <div> 
4.                     <h3><span>购房人</span></h3> 
5.                     <table> 
6.                         <tr> 
7.                             <td><span>选择</span></td> 
8.                             <td>姓名</td> 
9.                             <td>性别</td> 
10.                             <td>年龄</td> 
11.                             <td>关系</td> 
12.                             <td>户籍所在地</td> 
13.                         </tr> 
14.                         <tr> 
15.                             <td><input type="checkbox" /></td> 
16.                             <td><select /></td> 
17.                             <td><input /></td> 
18.                             <td><input /></td> 
19.                             <td><select /></td> 
20.                             <td><input /></td> 
21.                         </tr> 
22.                     </table> 
23.                 </div>             
24.                 <div> 
25.                     <h3><span>家庭成员</span></h3> 
26.                     <table> 
27.                         <tr> 
28.                             <td><span>选择</span></td> 
29.                             <td>姓名</td> 
30.                             <td>性别</td> 
31.                             <td>年龄</td> 
32.                             <td>关系</td> 
33.                             <td>户籍所在地</td> 
34.                             <td>工作单位</td> 
35.                             <td>编辑</td> 
36.                             <td>删除</td> 
37.                         </tr> 
38.                         <tr> 
39.                             <td><input type="checkbox" /></td> 
40.                             <td><select /></td> 
41.                             <td><input /></td> 
42.                             <td><input /></td> 
43.                             <td><input /></td> 
44.                             <td><input /></td> 
45.                             <td><input /></td