一、概念

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>06 表格标签</title>

    </head>

    <body>

        <!--

        table 表示一个表格

            border :表格的边框 默认根据数据的大小进行扩充

            width和height 设置宽和高

            cellspacing：单元格间距 表格中单元格之间的距离;

            cellpadding：单元格内文字与边框的距离

            tr:代表1行 .th和td都能声明一个单元格

            th：表格的属性列 ,默认居中加黑显示

            td：表格的数据,默认居左显示原始数据

        -->

        <h3>学院教授</h3>

        <table border="1px" cellspacing="0" cellpadding="5px"> <!--0弄出来是条细线-->

            <tr height="50px">

                <th width="100px">姓名</th>

                <th width="100px">年龄</th>

                <th width="100px">职务</th>

            </tr>

            <tr height="30px">

                <td>李白</td>

                <td>28</td>

                <td>教授</td>

            </tr>

            <tr height="30px">

                <td>杜甫</td>

                <td>19</td>

                <td>副教授</td>

            </tr>

        </table>

        <br />

       <!--快捷键 table>tr*4>td*3 然后按住tab键 一键生成4行3列的表格-->

       <h3>单元格的合并</h3>

         <table border="1px" cellspacing="0px">

             <tr height="35px">

                 <td width="100px"></td>

                 <td width="100px"></td>

                 <td width="100px"></td>

             </tr>

             <tr height="35px">

                 <!--先画出一个完整的表格

                     找到要合并的位置 合并列 colspan，然后将多余单元格删除 就是要合并2个,源码中只留一个td 2代表合并的个数

                     这是把第2行的第1列和第2列合并

                 -->

                 <td colspan="2"></td>

                 <td></td>

             </tr>

             <tr height="35px">

                 <td></td>

                 <td ></td>

                 <!--同理行的合并也是一样 在指定位置写好代码,然后删除多余的。这里是把第3行和第4行的的最后一列合并-->

                 <td rowspan="2"></td>

             </tr>

             <tr height="35px">

                 <td></td>

                 <td></td>

             </tr>

         </table>

    </body>

</html>

【作业-简历】

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>07 简历</title>

    </head>

    <body>

        <h3> 我的简历</h3>

        <br />           <!--style="border-bottom: none; 表示不要上表框 CSS的内容-->

        <table border="1px" cellspacing="0" style="border-bottom: none;">

            <tr height="27px">

                <td colspan="5">基本情况</td>

            </tr>

            <tr height="27px">

                <td width="120px">姓名</td>

                <td width="120px"></td>

                <td width="120px">性别</td>

                <td width="120px"</td>

                <td width="120px" rowspan="7"></td>

            </tr>

            <tr height="27px">

                <td>民族</td>

                <td></td>

                <td>出生年月</td>

                <td></td>

            </tr>

            <tr height="27px">

                <td>政治面貌</td>

                <td></td>

                <td>健康</td>

                <td></td>

            </tr>

            <tr height="27px">

                <td>籍贯</td>

                <td></td>

                <td>学历</td>

                <td></td>

            </tr>

            <tr height="27px">

                <td>电子信箱</td>

                <td></td>

                <td>联系电话</td>

                <td></td>

            </tr>

            <tr height="27px">

                <td >专业</td>

                <td colspan="3"></td>

            </tr>

            <tr height="27px">

                <td >毕业院校</td>

                <td colspan="3"></td>

            </tr>

            <tr height="27px">

                <td>求职意向</td>

                <td colspan="4"></td>

            </tr>

        </table>

        <table border="1px" cellspacing="0">

            <tr height="27px">

                <td colspan="4">教育情况</td>

            </tr>

            <tr height="27px">

                <td width="151px">时间</td>

                <td width="151px">院校</td>

                <td width="151px">专业</td>

                <td width="151px">学历</td>

            </tr>

            <tr height="27px">

                <td></td>

                <td></td>

                <td></td>

                <td></td>

            </tr>

            <tr height="27px">

                <td></td>

                <td></td>

                <td></td>

                <td></td>

            </tr>

        </table>

        <table border="1px" cellspacing="0" style="border-top: none;">

            <tr height="27px">

                <td colspan="4">工作经历</td>

            </tr>

            <tr height="27px">

                <td width="151px">时间</td>

                <td width="151px">公司</td>

                <td width="151px">职位</td>

                <td width="151px">内容</td>

            </tr>

            <tr height="27px">

                <td></td>

                <td></td>

                <td></td>

                <td></td>

            </tr>

            <tr height="27px">

                <td></td>

                <td></td>

                <td></td>

                <td></td>

            </tr>

        </table>

        <table border="1px" cellspacing="0" style="border-top: none;>

            <tr height="27px">

                <td >自我评价</td>

            </tr>

            <tr height="54px">

                <td width="616px" colspan="2" ></td>

            </tr>

        </table>

    </body>

</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. WPF导出发布安装包，无法验证发行者解决办法

    右击工程项目点发布->完成 此时在工程目录下生成了安装文件setup.exe 同时又在工程下生成了临时证书WpfApp1_TemporaryKey.pfx 如果此时强行安装会弹出如下警告 接下来 ...

  2. Zookeeper学习笔记(下)

    这是ZK学习笔记的下篇, 主要希望可以分享一些 ZK 的应用以及其应用原理 我本人的学习告一段落, 不过还遗留了一些ZK相关的任务开发和性能测试的任务, 留待以后完成之后再通过其他文章来进行分享了 Z ...

  3. C#与java的区别（继承，接口实现，指针，编译后形式，异常处理几个方面比较区别）

  4. JS&ASPDotNet_大文件上传问题

    HTML部分 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx. ...

  5. Java——类的继承、访问控制

    [继承] <1>Java只支持单继承,不支持多继承. <2>继承父类的私有成员变量,只有所有权,没有使用权.   [继承中的构造方法]

  6. 简单的LCA

    这么久了才做LCA的题,以前是感觉很难不敢去尝试,现在学习了一番之后发现算法本身并不难.... 学习时看了这篇博文:https://www.cnblogs.com/JVxie/p/4854719.ht ...

  7. Distinctive Image Features from Scale-Invariant Keypoints(SIFT) 基于尺度不变关键点的特征描述子——2004年

    Abstract摘要本文提出了一种从图像中提取特征不变性的方法,该方法可用于在对象或场景的不同视图之间进行可靠的匹配(适用场景和任务).这些特征对图像的尺度和旋转不变性,并且在很大范围的仿射失真.3d ...

  8. RedisTemplate访问Redis数据结构（四）——Set

    Redis的Set是string类型的无序集合.集合成员是唯一的,这就意味着集合中不能出现重复的数据,Redis 中 集合是通过哈希表实现的,所以添加,删除,查找的复杂度都是O(1). SetOper ...

  9. 3D Computer Grapihcs Using OpenGL - 05 EBO

    本节将采用两种方法绘制两个三角形. 先看第一种方法的代码 MyGlWindow.cpp #include <gl\glew.h> #include "MyGlWindow.h&q ...

  10. Oracle JET（三）Oracle JET 响应布局

    Oracle JET 提供了一系列的 CSS 样式以直接使用. Oracle JET CSS样式链接:http://docs.oracle.com/middleware/jet310/jet/refe ...