基于表单布局：分析过时的table结构与当下的div结构
一些话在前面
最近做了百度前端学院一个小任务，其中涉及到表单布局的问题， 它要处理的布局问题：左边的标签要右对齐，右边的输入框、单选按钮等要实现左对齐。
从开始入门就被告知table布局已经过时了，当时只知道其然不知其所以然，于是我尝试用了div布局和table布局两种解法。
先上效果图：
table布局表单
HTML结构：
<form action="" class="clearfix" id="reg"> <table class="table-form"> <tbody> <tr> <td><label for="address">请输入邮箱地址</label></td> <td><input class="i-inpt" type="text" id="address" placeholder="这是一个文本输入框"></td> <!--<td><input type="text"></td>--> </tr> <tr> <td></td> <td colspan="2"><span class="help-text">邮箱地址请按要求格式输入 </span></td> </tr> <tr> <td><label for="password">请输入密码</label></td> <td><input class="i-inpt" type="password" id="password" placeholder="这是一个文本输入框"></td> </tr> <tr> <td><label for="confirm-password">请重新输入密码</label></td> <td><input class="i-inpt" type="password" id="confirm-password" placeholder="这是一个文本输入框"></td> </tr> <tr> <td></td> <td colspan="2"><span class="help-text">密码请问6-16位英文数字</span></td> </tr> <tr> <td><label for="sex">性别</label></td> <td> <label class="sex" for="male"><input id="male" type="radio" checked="checked" name="sex">男</label> <label class="sex" for="female"><input id="female" type="radio" name="sex">女</label> </td> </tr> <tr> <td><label for="city">城市</label></td> <td> <select name="select" id="city"> <optgroup label="热门城市"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="">广州</option> <option value="4">深圳</option> </optgroup> <optgroup label="最近访问的城市"> <option value="1">中山</option> <option value="2">湛江</option> <option value="3">佛山</option> <option value="4">南京</option> </optgroup> </select> </td> </tr> <tr> <td><label for="favorite">爱好</label></td> <td> <label class="hobbies" for="sport"><input id="sport" type="checkbox" name="favorite" value="运动">运动</label> <label class="hobbies" for="art"><input id="art" type="checkbox" name="favorite" value="艺术">艺术</label> <label class="hobbies" for="science"><input id="science" type="checkbox" name="favorite" value="科学">科学</label> </td> </tr> <tr> <td><label for="description">个人描述</label></td> <td> <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框，输入您的个人描述"></textarea> </td> </tr> </tbody> <tr> <td colspan="2"> <button class="submit" type="submit">确认提交</button> </td> </tr> </table> </form>
CSS代码：
table, th, td { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* * 1.实现表单标签和文本输入框的宽度一致。文本居右对齐，有一定内边距 * 2.设置表单内边距 */ /*使表格的左边标签都居右，且内边距为10px*/ .table-form { height: 100%; width: 100%; /*设置表单表格宽度，使在各浏览器宽度表现一致*/ } select { width: 4em; } .table-form tr td:first-child { text-align: right; padding: 10px; } .i-inpt { width: 250px; height: 18px; } .help-text { color: #a7a7a7; } label { cursor: pointer; /* 设置光标 */ } /*提交按钮*/ .submit { /*1.设置尺寸和有颜色的边框。 2.用border-radius生成圆角并应用文本阴影。 3.通过使用图像或Webkit特有的渐变功能应用渐变的背景*/ width: 100%; line-height: 1.5em; /* 使文本居中 */ background: #4090fd; border: 1px solid #989898; border-radius: 6px; box-shadow: 2px 2px 2px #ccc; color: #FFFFFF; font-size: 1.5em; text-shadow: 1px 1px 1px #666; }
优点：直观方便
- 使用表格布局，tr元素作为每行的容器，每项内容就有对应的单元格套住，因为table自身的属性，效果直接出来了，外部css代码很少 。
缺点：可维护性差、不够灵活、为了样式牺牲语义化
- 需要使用属性colspan或rowsapn合并行或列，然后当在某一行增加新的单元格内容的时候，几乎要改变整个表格结构，才能实现标签或者输入框的对齐。例如在这里新增一项内容，则会要重新设置那些跨行的单元格colspan的值。
- 浏览器解析的时候是以单元格td的最大宽度为基准，所以无法单一调节某个单元格的宽度小于其他的单元格。
<td class="short"><input type="text" id="username" class="text" /></td>
td.short{ width:155px;}
- 因为每行要用tr元素嵌套，每个单元格要用td嵌套，导致HTML代码庞大。表格只用来显示表格数据，才是该有的语义化使用，也更便于搜素引擎和屏幕阅读器的识别。
div布局表单
HTML结构：
<form action="" id="reg"> <div class="box"> <label class="u-label" for="address">请输入邮箱地址</label> <input type="text" id="address" placeholder="这是一个文本输入框" class="i-inpt"> </div> <div class="box"><span class="help-text">邮箱地址请按要求格式输入 </span> </div> <div class="box"> <label class="u-label" for="password">请输入密码</label> <input type="password" id="password" placeholder="这是一个文本输入框" class="i-inpt"> </div> <div class="box"> <label class="u-label" for="confirm-password">请重新输入密码</label> <input type="password" id="confirm-password" placeholder="这是一个文本输入框" class="i-inpt"> </div> <div class="box"><span class="help-text">密码请问6-16位英文数字</span> </div> <div class="box"> <label for="sex" class="u-label">性别</label> <label class="sex" for="male"><input id="male" type="radio" checked="checked" name="sex">男</label> <label class="sex" for="female"><input id="female" type="radio" name="sex">女</label> </div> <div class="box"> <label class="u-label" for="city">城市</label> <select name="select" id="city"> <optgroup label="热门城市"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="">广州</option> <option value="4">深圳</option> </optgroup> <optgroup label="最近访问的城市"> <option value="1">中山</option> <option value="2">湛江</option> <option value="3">佛山</option> <option value="4">南京</option> </optgroup> </select> </div> <div class="box"> <label for="favorite" class="u-label">爱好</label> <label class="hobbies" for="sport"><input id="sport" type="checkbox" name="favorite" value="运动">运动</label> <label class="hobbies" for="art"><input id="art" type="checkbox" name="favorite" value="艺术">艺术</label> <label class="hobbies" for="science"><input id="science" type="checkbox" name="favorite" value="科学">科学</label> </div> <div class="box"> <label for="description" class="u-label">个人描述</label> <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框，输入您的个人描述"></textarea> </div> <div class="box"> <button class="submit" type="submit">确认提交</button> </div> </form>
CSS样式：
.box { margin: 1em; /*overflow: hidden; !*清理浮动的影响*!*/ } /* 清理浮动*/ .box:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } .help-text { color: #a7a7a7; margin-left: 21em; } label { cursor: pointer; /* 设置光标 */ } .u-label { float: left; /*设置浮动，此时才能设置宽度，而又不换行*/ width: 20em; text-align: right; padding-right: 1em; } .i-inpt { float: left; width: 250px; height: 18px; } select { width: 4em; }
优点：内容与样式分离、可维护性强、能够应对更复杂的表单布局
- div盒子不像td单元格被限制在父容器table中，可以自由活动。
- 能够应对更复杂的表单布局，如腾讯QQ注册界面
缺点：需要额外地掌握CSS样式代码控制各种情况
- label需要设定固定的宽度，才能让表单元素对应排齐，而table的同一列单元格宽度（内容决定）保持一致。
- 标签与输入框需要通过设置行高和高度（或定位）实现垂直方向对齐，而表格不用。
- 需要设置label浮动，并清除浮动
小结
- 表格HTML结构与CSS样式高度绑定，几乎一改要全改。
- div布局HTML结构与CSS样式高度分离，更灵活。
- 另外，对于具有父子层级关系的div，我们可以通过设置display:table或display:table-cell等来应用表格的特性。
- 需要注意的是，不应该过渡使用div，否则多层级的div会让布局更加复杂，难以维护。
以下各大网站的表单注册页面传送门：
- 支付宝注册界面（标签与输入框左右排列）
- 腾讯QQ注册界面（标签与输入框左右排列）
- google注册界面（标签与输入框上下排列，自备梯子）
参考资料
- Table Layouts vs Div Layouts by Geir Wavik（详细介绍div布局与table布局的差异与用法）
- 知乎上有关table与div的话题
