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月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
29天前
|
存储 缓存 移动开发
不来看一看HTML请求后端性能优化的实战总结吗?
本文主要总结了在ICBU的核心沟通场景下服务端在此次性能优化过程中做的工作,供大家参考讨论。
|
3月前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
3月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
60 3
|
3月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
63 2
|
3月前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
57 2
|
3月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于Django与HTML的新闻发布系统(二)
Web实战丨基于Django与HTML的新闻发布系统(二)
35 1
|
3月前
|
存储 数据库 数据安全/隐私保护
Web实战丨基于Django与HTML的新闻发布系统
Web实战丨基于Django与HTML的新闻发布系统
55 1
|
3月前
|
存储 搜索推荐 数据库
Web实战丨基于Django与HTML的用户登录验证系统
Web实战丨基于Django与HTML的用户登录验证系统
44 1
|
4月前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
69 7