一、概念

<!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. 【LuoguP4770】[NOI2018] 你的名字

    题目链接 题意简述 给定一个串 \(S\) 多组询问 , 每次给定一个串 \(T\) 和一个 区间 \([l,r]\) 求串\(T\) 有多少个本质不同的子串 满足不是 \(S[l...r]\) 的子 ...

  2. SPOJ-GSS1-Can you answer these queries 1

    链接: https://vjudge.net/problem/SPOJ-GSS1 题意: You are given a sequence A[1], A[2], ..., A[N] . ( |A[i ...

  3. Stree

    题目 给出n个点,m条有权边,现对于每一条边,你需要回答出包含这条边的最小生成树的总边权值. 分析 首先我们可以构造一个对于这n个点,m条有权边的最小生成树,显然,这是一棵最小的生成树. 那么这棵生成 ...

  4. 【leetcode】410. Split Array Largest Sum

    题目如下: Given an array which consists of non-negative integers and an integer m, you can split the arr ...

  5. git的初步研究1

    工作中很多项目再往git上迁移,所以打算研究下git git是个版本控制系统 理解git工作区.暂存区.版本库的概念 工作区:在电脑中能看到的目录 暂存区:index即索引 即首先add加入暂存区 c ...

  6. SpringBoot路径映射

    当然这个功能并非是springboot特有的,只是springboot提供了更简便的方法以供使用.     传统情况下我们跳转一个动态页面且并没有数据,也需要在controller中写一个跳转的con ...

  7. codevs 3060 抓住那头奶牛 x

    3060 抓住那头奶牛 USACO  时间限制: 1 s  空间限制: 16000 KB  题目等级 : 黄金 Gold   题目描述 Description 农夫约翰被告知一头逃跑奶牛的位置,想要立 ...

  8. Codeforces 980D

    这题其实挺水的,但我比较vegetable,交了好多次才过. 题意: 给定一个序列,把这个序列的所有连续子序列分组,每组中任意两个数相乘是个完全平方数,输出每个子序列最少分的组数: 思路: 先把每个数 ...

  9. Python_019(六星级别之反射方法)

    1.反射 1)神赐给你的内置函数 : a: getattr(命名空间,'函数名') == 命名空间.属性名; 这里的命名空间指的是对象或者类; b: getattr四个应用场景: 1)类名.名字 &l ...

  10. ES6 模板语法和分隔符

    let user = 'Barret'; console.log(`Hi ${user}!`); // Hi Barret!