一、概念

<!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. Python中numpy的应用

    #创建ndarray import numpy as np nd = np.array([2,4,6,'])#numpy中默认ndarray的所有元素的数据类型是相同,如果数据的类型不同,会统一为统一 ...

  2. gitpython 操作

    gitpython 获取仓库远程分支 https://blog.csdn.net/laiyaoditude/article/details/86218508 python操作git https://w ...

  3. 关于CSS你应该知道的基础知识 - 盒模型篇

    浏览器渲染引擎通过盒模型的方式来布局html元素.我们可以将每一个html元素都看做是一个盒子,每一个盒子都有长和款,多个这样的盒子组成了我们的网页. Margin,Border,Padding 每一 ...

  4. java:集合输出之Iterator和ListIterator二

    java:集合输出之Iterator和ListIterator二 ListIterator是Iterator的子接口,Iterator的最大特点是,能向前,或向后迭代.如果现在要想双向输出的话,则只能 ...

  5. 13 Spring Boot Shiro使用JS-CSS-IMG

    filterChainMap.put("/403", "anon");filterChainMap.put("/assets/**", &q ...

  6. luogu P1037 产生数 x

    P1037 产生数 题目描述 给出一个整数 n(n<10^30) 和 k 个变换规则(k<=15). 规则: 一位数可变换成另一个一位数: 规则的右部不能为零. 例如:n=234.有规则( ...

  7. 【bzoj3277&&3474】串

    *题目描述: 字符串是oi界常考的问题.现在给定你n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串(注意包括本身). *输入: 第一行两个整数n,k.接下来n行 ...

  8. ecshop 除去版权信息

    ECSHOP 2.73彻底去版权的方法 前台部分: 1. 去掉头部TITLE “- Powered by ecshop” 后者打开includes/lib_main.php $page_title = ...

  9. 运行PHP出现No input file specified错误解决办法

    配置了一台新服务器,使用的是IIS + Fastcgi + PHP 5.3.X,访问php页面的时候就会报错“No input file specified” 在php.ini文件里面修改: 1.增加 ...

  10. 动态DP总结

    动态DP 何为动态DP? 将画风正常的DP加上修改操作. 举个例子? 给你一个长度为\(n\)的数列,从中选出一些数,要求选出的数互不相邻,最大化选出的数的和. 考虑DP,状态设计为\(f[i][1/ ...