表格——表格的应用

 1.这个表格只有列合并没有行合并，但是它的细节还是挺多的，只要你掌握了一种，另外一种自然也会使用了。

（1）表格宽度的分配，默认情况下，当表格中有内容就会多分配空间，没有内容就会少分配空间，如果某一列从来没有单独存在过，就不会给它分配空间，这样就达不到我们想要的效果了，所以为了达到我们想要的效果我们要table添加table-layout：fixed；属性，让它根据表格总体宽度均匀分配，不管里面有没有内容或者有没有单独存在过。

（2）表格的宽度划分好了，高度我们也要设置，否则在填写内容时也会出现，有内容的占据更多的空间，这时只要个td设置固定的高度就可以了。

（3）我们可以看到最后一行的“仟 佰 拾 元 角 分之间是有空格的，对于新手来说一般会在两个字符之间写多个&nbsp；来达到效果，其实只要给td写上white-space：pre；属性，就可以在两个字符之间敲空格了。这个属性的作用就是可以识别多个空格和手动回车换行。

    /* css */
    *{
        margin: 0;
        padding: 0;
     }
       table{
        width: 692px;
        height: 288px;
        margin: 100px auto;
        /* table-layout 表格宽度分配规则，默认为自动分配（auto）根据总宽度，智能分配。
        有内容多分配，没内容少分配，如果某一列没有单独存在过，不分。fixed 固定分配，
        将总宽度均分，不管内容多少或者是否单独存在过。 */
        table-layout: fixed;
       }
       td{
        height: 32px;
        white-space: pre;
        text-align: center;
        line-height: 32px;
        font-size: 14px;
       }
   <!-- html -->
   <table border="1" rules="all">
    <tr>
        <td colspan="2">姓名</td>
        <td colspan="2"></td>
        <td colspan="2">职务</td>
        <td colspan="2"></td>
        <td colspan="2">出差事由</td>
        <td colspan="6"></td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td>起日</td>
        <td>止日</td>
        <td colspan="2">起讫地点</td>
        <td colspan="2">项目</td>
        <td>张数</td>
        <td colspan="3">金额</td>
        <!-- <td></td> -->
        <td colspan="2">项目</td>
        <td>天数</td>
        <td colspan="3">金额</td>
        <!-- <td></td> -->
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <td colspan="2">火车费</td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <td colspan="2">途中补助</td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <td colspan="2">汽车费</td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <td colspan="2">住勤补助</td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <td colspan="2">市内交通费</td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <td colspan="2">夜间乘车</td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <td colspan="2">住宿费</td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <td colspan="2">其它</td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <td colspan="2">邮电费</td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <td colspan="2"></td>
        <td></td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="2"></td>
        <td colspan="3">小计</td>
        <td colspan="2"></td>
        <td></td>
        <td colspan="2">小计</td>
        <!-- <td></td> -->
        <td colspan="3"></td>
        <td></td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td colspan="4">合计</td>
        <td colspan="12">（大写）    仟    佰    拾    元    角    分 ￥：</td>
        <!-- <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td> -->
    </tr>
   </table>