一、概念

<!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. #pragma 的使用(转)

    尽管 C 和 C++ 都已经有标准,但是几乎每个编译器 (广义,包含连接器等) 扩展一些 C/C++ 关键字. 合理地应用这些关键字,有时候能使我们的工作非常方便.下面随便说说 Visual C++ ...

  2. 在 LaTeX 中同步缩放 TikZ 与其中的 node

    PGF/TikZ 是 Till Tantau 开发的基于 TeX 的绘图引擎.因其可以直接在 LaTeX 文稿中通过代码绘制向量图,所以是目前流行的 LaTeX 绘图解决方案之一. 在 tikzpic ...

  3. 深入理解MySql事务

    事务是MySQL等关系型数据库区别于NoSQL的重要方面,是保证数据一致性的重要手段.本文将首先介绍MySQL事务相关的基础概念,然后介绍事务的ACID特性,并分析其实现原理. MySQL博大精深,文 ...

  4. 【leetcode】1124. Longest Well-Performing Interval

    题目如下: We are given hours, a list of the number of hours worked per day for a given employee. A day i ...

  5. 【leetcode】1129. Shortest Path with Alternating Colors

    题目如下: Consider a directed graph, with nodes labelled 0, 1, ..., n-1.  In this graph, each edge is ei ...

  6. ckeditor实现WORD粘贴图片自动上传,jsp应用

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  7. 解决Eclipse中文字体横着显示的问题

    Windows ——> Perference——> General ——> Appearence ——> Colors and Fonts ——> Basic ——> ...

  8. BigDecimal保留两位小数，或指定精确的位数

    public static void main(String[] args) { BigDecimal t1 = new BigDecimal("3.15289"); BigDec ...

  9. IO 输入输出流

    1) 数据流: 一组有序,有起点和终点的字节的数据序列.包括输入流和输出流.

  10. Redis实现存取数据+数据存取

    添加依赖: <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId> ...