最终样式

步骤分析：

  • 标题和报名时间为一块
  • 表格为一块
    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. spring boot配置Servlet容器

    Spring boot 默认使用Tomcat作为嵌入式Servlet容器,只需要引入spring-boot-start-web依赖,默认采用的Tomcat作为容器 01  定制和修改Servlet容器 ...

  2. 函数基础(二)(day11整理)

    目录 昨日内容 函数的定义 函数的三种定义方式 空函数 有参函数 无参函数 函数的调用 函数的返回值 函数的参数 形参 实参 今日内容 可变长参数 可变长形参 可变长实参(仅作了解) 函数对象 函数嵌 ...

  3. Redis（十一）缓存设计

    一.缓存的收益和成本 左侧为客户端直接调用存储层的架构,右侧为比较典型的缓存层+存储层架构, 缓存加入后带来的收益如下: 加速读写:因为缓存通常都是全内存的(例如Redis.Memcache),而存储 ...

  4. Mybatis JdbcType与Oracle、MySql 数据类型对应关系

    MyBatis 包含的jdbcType类型 ------------------------------------------------------------------------------ ...

  5. Kong04- Kong 四大参考说明

    Kong 四大参考说明 Kong 的官方有很多详细的参考说明,比如配置文件.命令行.Admin API.代理.负载均衡,接下来我们简单看一下,都提供什么内容. 本文主要基于 Kong 1.3 版本进行 ...

  6. NOIP模拟测试25

    这次考试后面心态爆炸了...发现刚了2h的T2是假的之后就扔掉了,草率地打了个骗分 T1只会搜索和m=0 最先做的T3,主要是发现部分分很多,当时第一眼看上去有87分(眼瞎了). 后来想了想,感觉一条 ...

  7. CSPS模拟 44

    状态不是很好吧 这套和前边是一套的, skyh在我旁边AK,好像开了三个对拍又在拼小人 T3 正解没调出来,暴力又忘交了qwq 当时心情都要爆炸了 T1 区间$gcd$乘区间长度的最大值 暴力是$n^ ...

  8. docker已运行容器添加或修改端口映射

    # 不推荐方法:将原来的容器提交成镜像,然后利用新的建立的镜像重新建立一个带有端口映射的容器# 推荐方法:## 查看id 就是 容器的 hash_of_the_container 数值 docker ...

  9. python机器学习——自适应线性神经元

    上篇博客我们说了感知器,这篇博客主要记录自适应线性神经元的实现算法及一些其他的训练细节,自适应线性神经元(简称为Adaline)由Bernard Widrow和他的博士生Tedd Hoff提出,对感知 ...

  10. vscode react自动补全html标签

    第一步:点击上图左下角设置,找到Settings,搜索includeLanguages 第二步:如上图点击图中红色区域,settings.json 第三部:把代码加入,如上图红色选择区域. " ...