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

简介: 休假申请单

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>




目录
相关文章
|
1月前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
109 1
|
4月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
4月前
|
存储 缓存 移动开发
不来看一看HTML请求后端性能优化的实战总结吗?
本文主要总结了在ICBU的核心沟通场景下服务端在此次性能优化过程中做的工作,供大家参考讨论。
|
6月前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
6月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
96 2
|
6月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
81 3
|
6月前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
123 2
|
6月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于Django与HTML的新闻发布系统(二)
Web实战丨基于Django与HTML的新闻发布系统(二)
54 1
|
6月前
|
存储 数据库 数据安全/隐私保护
Web实战丨基于Django与HTML的新闻发布系统
Web实战丨基于Django与HTML的新闻发布系统
83 1
|
6月前
|
存储 搜索推荐 数据库
Web实战丨基于Django与HTML的用户登录验证系统
Web实战丨基于Django与HTML的用户登录验证系统
97 1