一些话在前面
最近做了百度前端学院一个小任务，其中涉及到表单布局的问题， 它要处理的布局问题：左边的标签要右对齐，右边的输入框、单选按钮等要实现左对齐。
从开始入门就被告知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:;
padding:;
-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:;
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的话题