最终样式

步骤分析：

  • 标题和报名时间为一块
  • 表格为一块
    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. 部署acfs笔记

    acfs问题分析 环境描述 某电力项目创建了两个磁盘组,分别是OGGEXT和OGGREP,利用这两个磁盘组划分了两个acfs文件系统,之后,cloud监控就一直在报磁盘空间不足,但是这两个文件系统的使 ...

  2. day19作业

    1.什么是对象?什么是类? ​ 对象是特征和功能的结合体 ​ 类是一系列对象相同的特征和技能的集合体 2.绑定方法的有什么特点 ​ 绑定方式是由对象来调用类内部的函数,特点是会把对象当作第一个参数传入 ...

  3. django-模板之with标签（十二）

    就是给传过来的值取个别名.

  4. MarkDown的常用语法

    个人比较喜欢Markdown的语法,常用来做一些笔记,下面就简单介绍一下它的语法. 概览 宗旨 Markdown 的目标是实现「易读易写」. 可读性,无论如何,都是最重要的.一份使用 Markdown ...

  5. vue之页面缓存问题(基于2.0)

    为什么会有这篇文章 在vue2.0中出现了列表页面是每次都重新加载数据,但是详情页面却只在第一次加载的时候调用数据,如果返回到列表再进入详情那么页面是不会重新渲染页面. 1 用vue-router 重 ...

  6. 一篇文章让你彻底理解java中抽象类和接口

    目录 1.我所理解的抽象类 2.我所理解的接口 3.抽象类和接口本质区别 相信大家都有这种感觉:抽象类与接口这两者有太多相似的地方,又有太多不同的地方.往往这二者可以让初学者摸不着头脑,无论是在实际编 ...

  7. ProvisionedAppxPackage VS AppxPackage

    正文 先来说说问题的由来. 在 Preinstall 的 component 中,有一支 component 叫做 MS_StartApp,这个 component 的行为是在预安装时为目标机器装入一 ...

  8. CVE-2019-13272Linuxkernel权限许可和访问控制问题漏洞

    漏洞简介: Linuxkernel是美国Linux基金会发布的开源操作系统Linux所使用的内核. Linuxkernel5.1.17之前版本中存在安全漏洞,该漏洞源于kernel/ptrace.c文 ...

  9. CSPS模拟 59

    经ooo提醒咕题解会掉rp 我反正也冒着改不完题的风险,就开始颓博了 话说好久没这么舒坦的垫过底了233 上来一看T1,立刻就转化题意为有奇偶性和距离限制的bfs 然后就没考虑子串不能越过母串边界的事 ...

  10. 搞清楚 Python 的迭代器、可迭代对象、生成器

    很多伙伴对 Python 的迭代器.可迭代对象.生成器这几个概念有点搞不清楚,我来说说我的理解,希望对需要的朋友有所帮助. 1 迭代器协议 迭代器协议是核心,搞懂了这个,上面的几个概念也就很好理解了. ...