一、概念

<!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. Stack Overflow 推荐编程书单

    Stack Overflow 推荐编程书单   1 Working Effectively with Legacy Code Michael C. Feathers 修改代码是每一位软件开发人员的日常 ...

  2. 移动端适配 rem

    前置知识: 物理像素(physical pixel,device pixel) 物理像素(设备像素),显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度. 设备独立像素(de ...

  3. 通过virsh console进入虚拟机

    1.virsh启动一个虚拟机.执行脚本test_qga.sh 2.virsh vncdisplay <vm_ID> 3.vnc登录到vm里面,执行#systemctl start seri ...

  4. CSRF拦截

    CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/XSRF. 事实上 ...

  5. java Byte源码分析

    源码: public static int toUnsignedInt(byte x) { return ((int) x) & 0xff; } 原理: -128(byte) 原码:10000 ...

  6. 微信小程序细节部分

    微信小程序和HTML区别: 1.开发工具不同,H5的开发工具+浏览器Device Mode预览,小程序的开发基于自己的开发者工具 2.开发语言不同,小程序自己开发了一套WXML标签语言和WXSS样式语 ...

  7. APP功能测试注意点

    App功能测试的7大注意点 : APP测试   在日常工作的摸索中,我们将如何做好app测试的注意点简单归结为如下内容.  弱网测试,兼容性测试,UI测试.中断测试, 01 运行 1)App安装完成后 ...

  8. 如何解决DEDE织梦友情链接字数限制与链接个数限制的问题?

    如何解决DEDE织梦友情链接字数限制与链接个数限制的问题!织梦网站非常适合网站搭建以及网站优化,而友情链接是做优化必不可少的模块,我们经常搭建织梦网站发现织梦系统的友情链接模板有时候会限制字数不显示以 ...

  9. 从源码编译UE4,加快Setup.bat下载文件的环节

    之前很傻,每次运行这个setup.bat都要等很久很久才能把4g多的东西下载完成,知道有一天突然发现了世外桃源…… 从命令行运行setup.bat -help,可以看到参数的说明(没错,参数可选,之前 ...

  10. [ethereum源码分析](4) ethereum运行开启console

    前言 在上一章我们介绍了  ethereum初始化指令 ,包括了系统是如何调用指令和指令的执行.在本章节我们将会介绍 geth --datadir dev/data/ --networkid cons ...