• 昨天我们在《使用HTML添加表格1(基本元素)—零基础自学网页制作》(文章结尾有目录)中学习了如何向网页中添加基础表格,今天我们来学习如何为基础表格添加表头和表脚信息。先看看效果吧。 老规矩,先介绍表头和...
    # 添加表格头部信息与脚部信息
    
    ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY5ODg5MC04NTY3ZThmODhiODE0Yjlh?x-oss-process=image/format,png)
    
    昨天我们在《使用HTML添加表格1(基本元素)—零基础自学网页制作》(文章结尾有目录)中学习了如何向网页中添加基础表格,今天我们来学习如何为基础表格添加表头和表脚信息。先看看效果吧。
    
    ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY5ODg5MC02ZjkyY2M1ZTc0ZTgxODVj?x-oss-process=image/format,png)
    
    老规矩,先介绍表头和表脚的标签。
    
    表头:``
    
    这个标签只是告诉页面这里是表头,如果添加文字的话还需要``列标签和``行标签。
    
    如果要添加表头的话,直接在代码中添加这个标签是不行的,我们还需要将其他表格内容放置到``中,这样html才能知道哪里是表格内容,哪里是表头内容。
    
    示例代码如下所示:
    
    ```
    
      
      
      表格的头部信息
    
    
    表格标题
    
      姓名
    年龄
    
    
      一列一行
    一列二行
    
    
      二列一行
    二列二行
    
    
    
    ```
    
    代码效果如图:
    
    ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY5ODg5MC1hYzAxMWI0M2Y5MWY5MzBj?x-oss-process=image/format,png)
    
    大家通过观察发现,**表格的标题标签``虽然写在``里面,但是显示的时候,却一直在表格的最上面。**
    
    **合并单元格操作:**我们希望表头信息能够在表格中独占一列,这样就需要介绍如何修改``行标签中的colspan属性。
    
    示例代码如下:
    
    ```
    
      表格的头部信息
    ```
    
    修改后效果如下:
    
    ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY5ODg5MC1iODdjYTIwMjM2ZjkyODhm?x-oss-process=image/format,png)
    
    colspan的意思就是"列合并",col是column(列、纵队)的缩写,span是跨度的意思。
    
    colspan就是为``列标签指定跨越几个列向单元格。
    
    这里我们要合并两个,故colspan="2",**2一定要用半角引号引起来!**
    
    那合并行单元格的属性是什么呢?其实反推一下也能猜出。行的英文是row,因此rowspan就是"行合并"。
    
    代码示例如下:我们把"一行一列"和"二行一列"纵向合并。
    
    ```
    
      一列一行
    一列二行
    
    
    二列二行
    
    ```
    
    效果如图所示:
    
    ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY5ODg5MC1lOGI5YWI1NzhhZDkzNzEy?x-oss-process=image/format,png)
    
    **大家注意,如果您合并成了"一行一列",那就要把"二列一行"删掉。**
    
    最后,我们来写一下表格的脚部信息。
    
    脚部标签如下:``
    
    使用方法和``一样,在中间添加列行标签来显示内容。
    
    同时也要给``行标签进行列向合并单元格,即添加colspan="2"。
    
    示例代码如下:
    
    ```
    表格的脚部信息
    ```
    
    **值得注意的是:这块代码的位置在``之后,``之前。**
    
    **示例代码如下:**
    
    ```
    
      
      
      表格的头部信息
    
    
    
        
        表格的脚部信息
    
    
    
    表格标题
    
    姓名
    年龄
    
    
    一列一行
    一列二行
    
    
    二列二行
    
    
    
    ```
    
    页面效果如下:
    
    ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8yMjY5ODg5MC0xMmYxODViZTUwOTc0ZDRm?x-oss-process=image/format,png)
    
    今天的内容结束了。明天我们继续讲解列表元素的其他属性。
    
    喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言
    
    专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(网页制作,网站开发,web开发,从0基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端HTML5的项目实战【视频+工具+系统路线图】全栈工程师学习路线以及规划都有整理,分享给小伙伴)点:**[学习前端,我们是认真的](http://u6.gg/eUpjy)** 
    
    展开全文
  • 在展示数据,统计数据方面,表格比文字描述更具表达优势,在网页中,表格也经常被用来展示数据、计划日常安排等内容。如图所示: 今天我们就来学习一下如何向页面中添加表格元素。 首先来介绍一下表格元素中的基本...
  • HTML入门----简单网页制作 2012-11-16 11:44:25
    概念:HTML(Hypertext Markup Language)即超文本标记语言,用于网页文件的制作HTML由一系列的标记组成,可以说HTML的本质就是通过对各种标记进行组合嵌套将文本,表格,图片等网页元素组织成一个网页页面。   ...
  • 用Editplus制作HTML网页 2016-12-05 21:58:11
    最近在学习java web开发,作为预备知识,首先要学习HTML编程,这里记下我制作第一个网页的过程,我的学习分为以下几个步骤:①初识HTML ②Editplus简介 ③网页总体构思 ④涉及的知识点 一、初识HTML1、为什么要学...
  • 制作Html一般用DW(。。。。。。),Html全称为(Hyper Text Markup Language 超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐,图像,连接等等 网页分为动态网页与静态...
  • DW是一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页,是Web前端从业者的基础学习内容之一。
  • 网页制作入门 - Html的学习 本篇所授任务 网站信息页面案例 网站图片信息页面案例 网站友情链接页面案例 网站首页案例 网站注册页面案例 网站后台页面案例 教学导航 教学目标 了解什么是标记语言 ...
  • (2)超文本:在一个网页中除了文本之外的,还包含有视频,图片,音频,超链接,表格,列表等。 标记语言:指标签组合而成的语言<> 浏览器可以识别的只有html语言 网页的后缀名: .html和.h...
  • 网页制作步骤 2019-11-16 15:14:19
    2、随便编辑一些东西,切忌编辑网页内容的命令一点都不能输错,那怕少...5、保存完了返回桌面会多出一个网页版的文档,这个网页版的图标不固定的,你用的是什么浏览器就会是什么图标。 6、然后打开,选择打开方式...
  • 一天一个进步小技巧列表标签无序列表有序列表自定义列表表格标签表格单元格合并跨行跨列表格的高级标签布局与美化修饰设置表格相关元素的背景表格背景行背景色单元格背景色表格的填充与间距容器元素div标签和span...
  • 网页制作语言HTML5的应用 2019-09-27 21:44:13
    标准的由来1.1.3 HTML5文件基本结构1.2 制作网页的基本标签1.2.1 标题标签1.2.2 段落标签和换行标签1.2.3 水平线标签1.3 图像标签1.3.1 常用的图像格式1.3.2 图像标签的基本语法1.4 超链接标签1.4.1 超链接的...
  • 自从开始学习编程之后,体重就飙升,除了...HTML表格 表格常用标签 1、table标签:声明一个表格 2、tr标签:定义表格中的一行 3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元 表格...
  • 这里写自定义目录标题下面就来用代码介绍一下如何具体实现(以天涯明月刀弹出视频为例)看下完成效果如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义...
  • 本套教程(swf格式)主要针对0基础的学员,主要讲解了html常用标签的使用、表单表格列表的使用、单选复选下拉选项的制作、css盒子模型、行内标签和块级元素的区别、浮动和定位的使用、css优先级及权重的计算等。...
  • 表格空间设置 通过为<table></table>标签的cellspacing进行赋值可以调整单元格与单元格之间的空间距离。 示例代码如下: <table border = "1" width = "100%" cellspacing = "50"> 页面效果如下...
  • html之简单表格网站制作 2013-08-12 20:56:03
    超文本 单标签 双标签 黑粗体 斜体 加下划线 序号列表 无序号列表 区隔标记  bgcolor 设置背景颜色  link 设置链接颜色 vlink 设置已使用的链接的颜色 alink 设置正在被击中的链接的颜色 ...alt:
  • 本课程囊括了 所有用于开完前端的完整技术 用于需要满足前端开发技术的小伙伴  我们课程包括了HTML5+CSS3的所有知识点以及实际案例 通过本课程的学习 让你的前端不再是梦。
  • 2. WEB标准:制作网页的标准,web标准是一个集合体,一系列标准集合 WEB标准: 网页的结构 -> HTML语言 【 W3C 】 网页的表现 -> CSS语言 【 W3C 】 网页的行为 -> JavaScript [ js ]
  • 列表在网页制作中占据十分重要的地位,很多精美,漂亮的网页中都使用的了列表。 对于排列整齐有行有列的布局,表格是一种不可或缺的数据展示工具,使用表格可以灵活的实现数据的展示 如今的HTML5,如果你想在网页...
1 2 3 4 5 ... 20
收藏数 7,850
精华内容 3,140