1、项目展示
纯纯的HTML项目,没有css样式。
2、知识内容
- HTML5表格
- colspan属性:表示跨列,当某个格跨N列时,其右边N-1个单元格需删除。
- rowspan属性:表示跨行,当某个格跨N行时,其下方N-1个单元格需删除。
- broder-collapse:collapse 需合并表格边框
- :空格
我是一第一行为基础,然后对格往下走的。
3、项目代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>例三</title> </head> <body> <h2 style="width: 500px;text-align: center;text-decoration: underline;">特别休假申请单</h2> <p>申请日期: 年 月 日</p> <table border="1"width="500"style="border-collapse:collapse"><!--需合并表格边框--> <tr> <td>所属单位</td> <td> 部 组 班 </td> <td>职称</td> <td> </td> <td>名字</td> <td> </td> <td>厂长</td> </tr> <tr> <td rowspan="2">期间</td> <!--跨2行--> <td colspan="3"> 年 月 日 </td> <!--跨2列--> <td rowspan="2" colspan="2">天数</td> <!--跨2行--> <td> </td> </tr> <tr> <td colspan="3"> 年 月 日</td> <!--跨3列--> <td>主管</td> </tr> <tr> <td colspan="2">职务代理人</td> <!--跨2列--> <td colspan="4">盖章</td> <!--跨4列--> <td> </td> </tr> <tr> <td>到期日期</td> <td colspan="3"> 年 月 日</td> <!--跨3列--> <td colspan="2">审核意见</td> <!--跨2列--> <td>组长</td> </tr> <tr> <td colspan="2">全年特别休假数</td> <!--跨2列--> <td colspan="2" align="right">天 </td> <!--跨2列--> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="2">已请假数</td> <!--跨2列--> <td colspan="2" align="right">天</td> <!--跨2列--> <td>人事主任</td> <td>人事经办</td> <td>组长</td> </tr> <tr> <td colspan="2">本次申请日数</td> <!--跨2列--> <td colspan="2" align="right">天</td> <!--跨2列--> <td rowspan="2"> </td> <!--跨2行--> <td rowspan="2"> </td> <!--跨2行--> <td rowspan="2"> </td> <!--跨2行--> </tr> <tr> <td colspan="2">尚剩申请日数</td> <!--跨2列--> <td colspan="2" align="right">天</td> <!--跨2列--> </tr> </table> </body> </html>