基于表单布局：分析过时的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的话题
  • 用CSS布局的话，什么是使用表格最合适？

  • 网页的 Table 布局和 DIV+CSS 布局从哪里可以看出来？Table 布局已经过时了吗？