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

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

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

简介： 休假申请单

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>申请日期：&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>

标签：#申请单 #阿里 #开发者 #实战 #简单 #社区

上一篇：写html需要用什么软件
下一篇：21 个HTML网页转RSS Feeds的工具

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

1、项目展示

2、知识内容

3、项目代码

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠