最终样式

步骤分析：

  • 标题和报名时间为一块
  • 表格为一块
    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. markdown（typora）基本语法

    目录 * 标题 * 加粗 * 斜体 * 高亮 * 上标 * 下标 * 代码引用(>式和```式) * 代码引入(`式) * 插入链接(链接显示) * 插入链接(连接描述显示) * 插入图片(链接 ...

  2. 课堂动手动脑验证以及自定义异常类实现对异常处理——java异常类

    异常(exception):发生在程序执行期间,表明出现了一个非法运行的情况.许多JDK中的方法在检测到非法情况时,都会抛出一个异常对象.例如:数组越界和被0除. 代码验证: package test ...

  3. UnityWebRequest_ZT

    using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using U ...

  4. Oauth 2.0学习

    OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. 本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释,主要参考材料为R ...

  5. 致Java星球程序员兄弟们的一封信

    致Java星球程序员兄弟们的一封信 亲爱的Java星球的程序员兄弟们: 你们好!我是来自地球的一名Java程序员,首先我代表地球人对贵星球的高司令来到地球传授Java语言,造福了全人类,造福了整个地球 ...

  6. 键盘常见ascii码值

    回车事件最常见,码值13 ESC键: VK_ESCAPE (27) 回车键: VK_RETURN (13) TAB键: VK_TAB (9) Caps Lock键: VK_CAPITAL (20) S ...

  7. 【XSY2558】圆上的蚂蚁 Ants on circle

    Description L个点围成一个圆. 我们选定任意一个点作为原点, 则每个点的坐标为从原点顺时针走到这个点的距离. 圆上有N只蚂蚁, 分别被编号为1到N. 开始时, 第ii只蚂蚁在坐标为Xi的点 ...

  8. 学习笔记43_T4模板

    新建-文本模板(后缀为.tt) <#@ template debug="false" hostspecific="false"  language=&qu ...

  9. regexp盲注的一些改进

    index.php?id=1 and 1=(SELECT 1 FROM information_schema.tables WHERE TABLE_SCHEMA="blind_sqli&qu ...

  10. [考试反思]1008csp-s模拟测试64：契机

    暴力没打满...有点垃圾... 考得稍绝望,啥也不会啊??? T3的测试点分治还写挂了... 其实就是没有沉下心好好的思考,在三道题上来回切换结果一个成型思路都没有 T2既然已经想到那一步了居然没有继 ...