最终样式

步骤分析：

  • 标题和报名时间为一块
  • 表格为一块
    1. 由图可知，可创建一个七行八列的列表存储数据
    2. 首先设置边框的样式，边框 大小，这里是黑色不好看可以设置为天空蓝
    3. 可选矿使用<input type="checkbox">
    4. 有些框需要占据多列，添加colspan属性
    5. 有些单元格需要占据多行，添加rowspan属性
    6.  <!DOCTYPE html>
      
 <html lang="en">

 <head>
      
   <meta charset="UTF-8" />
      
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      
   <title>Document</title>
      
 </head>

 <body>
      
   <div style="color:red;font-size:30px;text-align:center;width:100%;">
      
     2019 年度一级建造师报名表
      
   </div>
      
   <div style="text-align: center;padding:10px;">
      
     报名时间：&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日
      
   </div>
      
   <table align="center" border="1" cellspacing="0" width="1000px">
      
     <tr>
      
       <td>姓名</td>
      
       <td></td>
      
       <td>性别</td>
      
       <td>&nbsp;&nbsp;&nbsp;</td>
      
       <td>邮编</td>
      
       <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
      
       <td>电邮</td>
      
       <td></td>
      
     </tr>
      
     <tr>
      
       <td>出生年月</td>
      
       <td>&nbsp;&nbsp;&nbsp;</td>
      
       <td>学历</td>
      
       <td>&nbsp;&nbsp;&nbsp;</td>
      
       <td>电话手机</td>
      
       <td colspan="2"></td>
      
       <td>“鲁班会”会员卡号</td>
      
     </tr>
      
     <tr>
      
       <td>单位名称</td>
      
       <td colspan="3"></td>
      
       <td>传真</td>
      
       <td colspan="2"></td>
      
       <td colspan="2"></td>
      
     </tr>
      
     <tr>
      
       <td rowspan="2">报考情况及辅导班级</td>
      
       <td colspan="4">
      
         <span><input type="checkbox" />首次报考</span>
      
         <span><input type="checkbox" />非首次报考</span>
      
         <span><input type="checkbox" />增项</span>
      
       </td>
      
       <td colspan="3">
      
         所报科目：
      
         <span><input type="checkbox" />法规</span>
      
         <span><input type="checkbox" />施工管理</span>
      
         <span>实务科目：</span>
      
       </td>
      
     </tr>
      
     <tr>
      
       <td colspan="7">
      
         所报辅导班

         <span><input type="checkbox" />精讲班</span>
      
         <span><input type="checkbox" />讲题班</span>
      
         <span><input type="checkbox" />冲刺班</span>
      
         <span><input type="checkbox" />点题班</span>
      
         <span><input type="checkbox" />签约协议班</span>
      
       </td>
      
     </tr>
      
     <tr>
      
       <td>所在城市</td>
      
       <td colspan="3">&nbsp;&nbsp;&nbsp;省&nbsp;&nbsp;&nbsp;地区/市</td>
      
       <td>报读分校</td>
      
       <td>&nbsp;&nbsp;&nbsp;</td>
      
       <td>咨询老师</td>
      
       <td></td>
      
     </tr>
      
     <tr>
      
       <td>身份证号码</td>
      
       <td colspan="7"></td>
      
     </tr>
      
   </table>
      
 </body>

 </html>

html基础——表格练习的更多相关文章

  1. 【共享单车】—— React后台管理系统开发手记：AntD Table基础表格

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  2. HTML学习笔记 基础表格案例 第二节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. html基础-表格-列表（4）

    今天准备为大家准备了表格和列表. 一.文章有各种数据的表格这个网页也不例外. (1).标签意思 <table>----------------------表格开始 <caption& ...

  4. HTML基础——表格的应用

    一.表格标签 1.基本格式: 每个表格由 table 标签开始. 每个表格行由 tr 标签开始. 每个表格数据由 td 标签开始. 例如: <html> <head> < ...

  5. HTML+css基础 表格标签table Table标签属性 td标签属性

    表格标签table:   他是由行与列构成,最小单位是单元格. 行标签  <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...

  6. HTML-表格-基础表格

      主要内容: HTML表格 基本语法和结构: 案例: border用在table标签里面,表示边框的. th标签是加粗,width是宽度,表格宽度用在table里面.: caption用在table ...

  7. 2020年12月-第01阶段-前端基础-表格 table

    表格 table(会使用) 为了让我们页面显示的更加整齐,我们需要学习三个表(表格.表单.列表) 理解: 能说出表格用来做什么的 表格的基本结构组成 表格作用: 存在即是合理的. 表格的现在还是较为常 ...

  8. html基础 表格的相关属性使用

    1.1表格的基本标签 语法结构:<table> /*整体包裹部分,包裹多个tr */ <tr> /* 表格的每一个行,包裹td */ <td></td> ...

  9. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

随机推荐

  1. MyBatis（2）-- MyBatis配置mybatis-config.xml

    一.properties属性 1.可以在mybatis-config.xml中使用property子元素配置 <properties resource="jdbc.properties ...

  2. 设计模式（九）Bridge模式

    Bridge模式就是将类的功能层次结构和类的实现层次结构连接起来. 类的功能层次结构就是根据实际非抽象类来说的,也就是父类具有基本功能,然后在子类中增加新功能.用于增加新功能. 类的实现层次结构就是根 ...

  3. Spring框架学习笔记（5）——Spring Boot创建与使用

    Spring Boot可以更为方便地搭建一个Web系统,之后服务器上部署也较为方便 创建Spring boot项目 1. 使用IDEA创建项目 2. 修改groupid和artifact 3. 一路n ...

  4. class定义类 及 实现继承

    class 定义类 代码如下: class Student { constructor(name) { this.name = name; } sayHello() { console.log(&qu ...

  5. js 面试题解析（一）

    1.call和apply的区别. 当需要传的参数是一个数组时,使用apply更加方便;而使用call时需要将数组展开,将数组中的每一项单独传入. 当需要传入的参数大于3个时,call的性能要略优于ap ...

  6. [Neo4j]Conda虚拟环境中安装python-igraph

    neo4j算法需要用到python-igraph包,但试过很多方法,都失败了 pip install python-igraph 安装失败, 提示C core of igraph 没有安装. 在con ...

  7. [考试反思]1025csp-s模拟测试87：生存

    想起一句话 课上求生存,课下求发展 发展还好说,如何生存? 生存很困难... 没什么可抱怨的.有AK的.高分的也很多. 该说的在<Dust>里说完了,安静会吧. 这场rank43怎么追? ...

  8. RouterOS安装以及搭建DHCP PPPoE PPTP L2TP服务

    1.安装routeros https://mikrotik.com/download 网站下载routeros镜像 vdi格式 :VirtualBox默认创建的硬盘文件格式 vmdk格式:VMware ...

  9. 130道ASP.NET面试题（二）

    71.什么是反射?答:动态获取程序集信息 72.用Singleton如何写设计模式答:static属性里面new ,构造函数private 73.什么是Application Pool?答:Web应用 ...

  10. JavaScript闭包使用姿势指南

    目录 JavaScript闭包使用姿势指南 引言 闭包的定义 来个有趣的例子吧 现在我们换个例子吧 我们再来个有趣的例子 内存泄露问题 用闭包解决递归调用问题 用闭包模拟私有方法 在循环中使用闭包 性 ...