最终样式

步骤分析：

  • 标题和报名时间为一块
  • 表格为一块
    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. 利用SpringBoot+Logback手写一个简单的链路追踪

    目录 一.实现原理 二.代码实战 三.测试 最近线上排查问题时候,发现请求太多导致日志错综复杂,没办法把用户在一次或多次请求的日志关联在一起,所以就利用SpringBoot+Logback手写了一个简 ...

  2. JavaWeb 如何防止表单重复提交 - 使用Token，令牌

    JavaWeb 如何防止表单重复提交 - 使用Token,令牌 说到重复提交 ,应该想到两种场景:1. 在下单,或者支付 这种情况 那么不允许  刷新,不允许后退再点击提交(后退之后提交会失败,修改了 ...

  3. win7重装系统经验总结报告(2013年6月29日凌晨1：45)

    win7重装系统经验总结报告(2013年6月29日凌晨1:45) 步骤: 1.考虑被重做的电脑是否有重要文件在C盘.有则转移到D盘等非系统盘. 2.看该电脑是2GB内存还是4GB以上内存. 3.准备好 ...

  4. JVM(1) Java内存区域

    对于Java程序员来说,在虚拟机自动内存管理机制的帮助下,不再需要为每一个new操作去写配对的delete/free代码,不容易出现内存泄漏和内存溢出问题.不过,也正是因为Java程序员把内存控制的权 ...

  5. nginx基于uwsgi部署Django

    1.安装nginx yum install -y nginx(需要epel源) 2.安装uwsgi yum groupinstall "Development tools" yum ...

  6. hadoop2.6集群环境搭建

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一.环境说明 1.机器:一台物理机 和一台虚拟机 2.Linux版本:[Spark@S1PA11 ~]$ cat /etc/issueRed Ha ...

  7. 【ObjectC—浅copy和深copy】

    一.OC设计copy的目的 为了能够从源对象copy一个新的对象副本,改变新对象(副本)的时候,不会影响到原来的对象. 二.实现copy协议 OC提供了两种copy方法:copy和mutableCop ...

  8. 重置root密码！

    偶尔把密码忘记了也不用慌,重置密码只需简单几步: 第1步:开机后在内核上敲击“e”. 第2步:在linux16这行的后面输入“rd.break”并敲击“ctrl+x“. 第3步:进入到了系统的紧急求援 ...

  9. 『题解』洛谷P1351 联合权值

    更好的阅读体验 Portal Portal1: Luogu Portal2: LibreOJ Description 无向连通图\(\mathrm G\)有\(n\)个点,\(n - 1\)条边.点从 ...

  10. 如何学习python，个人的一些简单见解

    什么是重要的东西 思考学习是一个什么样的过程 我们每个人都学习过数学,肯定都知道数学的学习过程是什么,我们刚开始学习数学的时候会学习一些简单的公式和概念,比如加减乘除,随着学习的深入,我们发现在大学之 ...