table 元素使用案例(设置工单表格)

来源:互联网 发布:windows文件夹加密码 编辑:程序博客网 时间:2024/05/21 16:56

代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>项目增补单</title>    <style type="text/css">        span {            float: left;            margin-right: 160px;        }    </style></head><body><table border="1" bordercolor="gray" cellspacing="0" width="800px" height="400px">    <caption style="font-weight: bold;font-size: large;">项目增补单</caption>    <tr>        <th>序号</th>        <th>维持项目及更换配件</th>        <th>单价</th>        <th>数量</th>        <th>小价</th>        <th>工时费</th>        <th>合计</th>        <th>故障原因</th>    </tr>    <tr>        <td align="center">1</td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>    </tr>    <tr>        <td align="center">2</td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>    </tr>    <tr>        <td align="center">3</td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>    </tr>    <tr>        <td align="center">4</td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>    </tr>    <tr>        <td align="center">5</td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>    </tr>    <tr>        <td align="center">6</td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>        <td></td>    </tr>    <tr>        <td rowspan="4" align="center">7</td>        <td></td>        <td rowspan="4" colspan="2"></td>        <td rowspan="4"></td>        <td rowspan="4"></td>        <td rowspan="4"></td>        <td rowspan="4"></td>    </tr>    <tr>        <td></td>    </tr>    <tr>        <td></td>    </tr>    <tr>        <td></td>    </tr>    <tr>        <td colspan="2">备件费用小计:</td>        <td colspan="5">工时费用小计:</td>        <td colspan="2">合计:</td>    </tr></table><span>班组长:  </span><span>技术部:</span><span> 服务时间:</span> <span>客户确认:</span></body></html>

截图:



原创粉丝点击