当前位置:网站首页 > 网站建设教程 > HTML教程 > 正文

HTML5简单实战--休假申请单

教程管理员 发布于2023-09-28 09:30 HTML教程 125

简介: 休假申请单

1、项目展示

纯纯的HTML项目,没有css样式。

image.png


2、知识内容

  1. HTML5表格
  2. colspan属性:表示跨列,当某个格跨N列时,其右边N-1个单元格需删除。
  3. rowspan属性:表示跨行,当某个格跨N行时,其下方N-1个单元格需删除。
  4. broder-collapse:collapse  需合并表格边框
  5.  :空格


我是一第一行为基础,然后对格往下走的。


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>申请日期:&nbsp;&nbsp;年&nbsp;&nbsp;月&nbsp;&nbsp;日</p>
    <table border="1"width="500"style="border-collapse:collapse"><!--需合并表格边框-->
     <tr>
         <td>所属单位</td>
         <td>&nbsp;&nbsp;&nbsp;部&nbsp;组&nbsp;班&nbsp;</td>
         <td>职称</td>
         <td>&nbsp;&nbsp;&nbsp;</td>
         <td>名字</td>
         <td>&nbsp;&nbsp;&nbsp;</td>
         <td>厂长</td>
     </tr>
     <tr>
         <td rowspan="2">期间</td>                <!--跨2行-->
         <td colspan="3">&nbsp;年&nbsp;月&nbsp;日 </td> <!--跨2列-->
         <td rowspan="2" colspan="2">天数</td>    <!--跨2行-->
         <td>&nbsp;&nbsp;&nbsp;</td>
     </tr>
     <tr>
         <td colspan="3">&nbsp;年&nbsp;月&nbsp;日</td>  <!--跨3列-->
         <td>主管</td>
     </tr>
     <tr>
         <td colspan="2">职务代理人</td>  <!--跨2列-->
         <td colspan="4">盖章</td>       <!--跨4列-->
         <td>&nbsp;&nbsp;&nbsp;</td>
     </tr>
     <tr>
         <td>到期日期</td>
         <td colspan="3">&nbsp;年&nbsp;月&nbsp;日</td>  <!--跨3列-->
         <td colspan="2">审核意见</td>             <!--跨2列-->
         <td>组长</td>
     </tr>
     <tr>
         <td colspan="2">全年特别休假数</td>     <!--跨2列-->
         <td colspan="2" align="right">天 </td> <!--跨2列-->
         <td>&nbsp;&nbsp;&nbsp;</td>
         <td>&nbsp;&nbsp;&nbsp;</td>
         <td>&nbsp;&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;</td> <!--跨2行-->
         <td rowspan="2">&nbsp;&nbsp;&nbsp;</td>  <!--跨2行-->
         <td rowspan="2">&nbsp;&nbsp;&nbsp;</td>  <!--跨2行-->
     </tr> 
     <tr>
        <td colspan="2">尚剩申请日数</td>   <!--跨2列-->
        <td colspan="2" align="right">天</td>  <!--跨2列-->
     </tr>
    </table>
</body>
</html>





琼ICP备09004296号-12