一、概念

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>06 表格标签</title>
  6.     </head>
  7.     <body>
  8.         <!--
  9.         table 表示一个表格
  10.             border :表格的边框 默认根据数据的大小进行扩充
  11.             width和height 设置宽和高
  12.             cellspacing：单元格间距 表格中单元格之间的距离;
  13.             cellpadding：单元格内文字与边框的距离
  14.             tr:代表1行 .th和td都能声明一个单元格
  15.             th：表格的属性列 ,默认居中加黑显示
  16.             td：表格的数据,默认居左显示原始数据
  17.  
  18.         -->
  19.         <h3>学院教授</h3>
  20.         <table border="1px" cellspacing="0" cellpadding="5px"> <!--0弄出来是条细线-->
  21.             <tr height="50px">
  22.                 <th width="100px">姓名</th>
  23.                 <th width="100px">年龄</th>
  24.                 <th width="100px">职务</th>
  25.             </tr>
  26.  
  27.             <tr height="30px">
  28.                 <td>李白</td>
  29.                 <td>28</td>
  30.                 <td>教授</td>
  31.             </tr>
  32.  
  33.             <tr height="30px">
  34.                 <td>杜甫</td>
  35.                 <td>19</td>
  36.                 <td>副教授</td>
  37.             </tr>
  38.         </table>
  39.         <br />
  40.  
  41.        <!--快捷键 table>tr*4>td*3 然后按住tab键 一键生成4行3列的表格-->
  42.        <h3>单元格的合并</h3>
  43.          <table border="1px" cellspacing="0px">
  44.              <tr height="35px">
  45.                  <td width="100px"></td>
  46.                  <td width="100px"></td>
  47.                  <td width="100px"></td>
  48.              </tr>
  49.              <tr height="35px">
  50.                  <!--先画出一个完整的表格
  51.                      找到要合并的位置 合并列 colspan，然后将多余单元格删除 就是要合并2个,源码中只留一个td 2代表合并的个数
  52.                      这是把第2行的第1列和第2列合并
  53.                  -->
  54.                  <td colspan="2"></td>
  55.  
  56.                  <td></td>
  57.              </tr>
  58.              <tr height="35px">
  59.                  <td></td>
  60.                  <td ></td>
  61.                  <!--同理行的合并也是一样 在指定位置写好代码,然后删除多余的。这里是把第3行和第4行的的最后一列合并-->
  62.                  <td rowspan="2"></td>
  63.              </tr>
  64.              <tr height="35px">
  65.                  <td></td>
  66.                  <td></td>
  67.  
  68.              </tr>
  69.          </table>
  70.  
  71.     </body>
  72. </html>

【作业-简历】

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>07 简历</title>
  6.     </head>
  7.     <body>
  8.         <h3> 我的简历</h3>
  9.         <br />           <!--style="border-bottom: none; 表示不要上表框 CSS的内容-->
  10.         <table border="1px" cellspacing="0" style="border-bottom: none;">
  11.             <tr height="27px">
  12.                 <td colspan="5">基本情况</td>
  13.  
  14.             </tr>
  15.             <tr height="27px">
  16.                 <td width="120px">姓名</td>
  17.                 <td width="120px"></td>
  18.                 <td width="120px">性别</td>
  19.                 <td width="120px"</td>
  20.                 <td width="120px" rowspan="7"></td>
  21.             </tr>
  22.  
  23.             <tr height="27px">
  24.                 <td>民族</td>
  25.                 <td></td>
  26.                 <td>出生年月</td>
  27.                 <td></td>
  28.  
  29.             </tr>
  30.             <tr height="27px">
  31.                 <td>政治面貌</td>
  32.                 <td></td>
  33.                 <td>健康</td>
  34.                 <td></td>
  35.  
  36.             </tr>
  37.             <tr height="27px">
  38.                 <td>籍贯</td>
  39.                 <td></td>
  40.                 <td>学历</td>
  41.                 <td></td>
  42.  
  43.             </tr>
  44.             <tr height="27px">
  45.                 <td>电子信箱</td>
  46.                 <td></td>
  47.                 <td>联系电话</td>
  48.                 <td></td>
  49.             </tr>
  50.             <tr height="27px">
  51.                 <td >专业</td>
  52.                 <td colspan="3"></td>
  53.             </tr>
  54.             <tr height="27px">
  55.                 <td >毕业院校</td>
  56.                 <td colspan="3"></td>
  57.             </tr>
  58.             <tr height="27px">
  59.                 <td>求职意向</td>
  60.                 <td colspan="4"></td>
  61.             </tr>
  62.         </table>
  63.         <table border="1px" cellspacing="0">
  64.             <tr height="27px">
  65.                 <td colspan="4">教育情况</td>
  66.             </tr>
  67.             <tr height="27px">
  68.                 <td width="151px">时间</td>
  69.                 <td width="151px">院校</td>
  70.                 <td width="151px">专业</td>
  71.                 <td width="151px">学历</td>
  72.             </tr>
  73.             <tr height="27px">
  74.                 <td></td>
  75.                 <td></td>
  76.                 <td></td>
  77.                 <td></td>
  78.             </tr>
  79.             <tr height="27px">
  80.                 <td></td>
  81.                 <td></td>
  82.                 <td></td>
  83.                 <td></td>
  84.             </tr>
  85.         </table>
  86.         <table border="1px" cellspacing="0" style="border-top: none;">
  87.             <tr height="27px">
  88.                 <td colspan="4">工作经历</td>
  89.             </tr>
  90.             <tr height="27px">
  91.                 <td width="151px">时间</td>
  92.                 <td width="151px">公司</td>
  93.                 <td width="151px">职位</td>
  94.                 <td width="151px">内容</td>
  95.             </tr>
  96.             <tr height="27px">
  97.                 <td></td>
  98.                 <td></td>
  99.                 <td></td>
  100.                 <td></td>
  101.             </tr>
  102.             <tr height="27px">
  103.                 <td></td>
  104.                 <td></td>
  105.                 <td></td>
  106.                 <td></td>
  107.             </tr>
  108.         </table>
  109.         <table border="1px" cellspacing="0" style="border-top: none;>
  110.             <tr height="27px">
  111.                 <td >自我评价</td>
  112.             </tr>
  113.             <tr height="54px">
  114.                 <td width="616px" colspan="2" ></td>
  115.             </tr>
  116.         </table>
  117.  
  118.     </body>
  119. </html>

[19/05/16-星期四] HTML_body标签(表格标签)的更多相关文章

  1. python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  2. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  3. 前端 HTML body标签相关内容 常用标签 表格标签 table

    表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...

  4. PHP全栈开发（四）: HTML 学习（1.基础标签+表格标签）

    简单的学习一下HTML 学习HTML采用在www.runoob.com上学习的方法. 而且该网站还提供在线编辑器. 然后HTML编辑器使用Notepad++ 记得上Emmet的官网http://emm ...

  5. H5 表格标签基本使用

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

  6. html系列教程--span style 及表格标签 title video

    <span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...

  7. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  8. [19/05/15-星期三] HTML_body标签(超链接标签和锚点)

    一.超链接标签 <html> <head> <meta charset="UTF-8"> <title>04 body超链接标签学习 ...

  9. [19/05/14-星期二] HTML_body标签(列表标签和图片标签)

    一.列表标签 <!-- 快捷键 1.<meta charset="UTF-8"/> 用m6可直接写出 2.复制当前1行到下一行 ctrl+shift+R --&g ...

随机推荐

  1. hdu 3530 单调队列最值

    /** HDU 3530 单调队列的应用 题意: 给定一段序列,求出最长的一段子序列使得该子序列中最大最小只差x满足m<=x<=k. 解题思路: 建立两个单调队列分别递增和递减维护(头尾删 ...

  2. u-boot makefile $$

    define filechk_uboot.release    echo "$(UBOOTVERSION)$$($(CONFIG_SHELL) $(srctree)/scripts/setl ...

  3. java Class类使用

    1.forName public static Class<?> forName(String className) throws ClassNotFoundException 返回与带有 ...

  4. 2019年8月5日~8月11日 第六周JAVA学习总结

    本周主要进行了对JAVA基础的学习和PTA代码的编写,平均每天花在学习上的时间约3个小时,花在代码上的时间约2个小时,花在解决问题上的时间约1.5个小时. 下周打算继续JAVA的学习,完成java面向 ...

  5. NOIP2016 D1T1 玩具谜题

    洛谷P1563 看完了noip2017觉得noip2016是真的简单……2017第一题就卡住2016第一题10分钟AC 思路: m<=100000很明显暴力模拟就可以 唯一有一点点难度的地方就是 ...

  6. CSS——相对定位、绝对定位、固定定位

    相对定位: position:relative 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位 ...

  7. CSS3——制作正在加载页面loading...

    今天做了好多小东西,还挺开心的~ <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  8. 举个例子去理解vuex（状态管理），通俗理解vuex原理，通过vue例子类比

    通俗理解vuex原理---通过vue例子类比   本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...

  9. mysql BETWEEN操作符 语法

    mysql BETWEEN操作符 语法 作用:选取介于两个值之间的数据范围.这些值可以是数值.文本或者日期.大理石平台 语法:SELECT column_name(s) FROM table_name ...

  10. c++复习——类（1）

    1.  拷贝构造函数 //并没有搞懂 先存着吧  遇到实际情况再回来看看 拷贝构造函数在以下三种情况被调用: (1)当用一个已经初始化过的对象去初始化同类另一个对象时, 拷贝构造函数被调用. Samp ...