html用于定义表格的脚部,# 使用HTML添加表格2（表格头部与脚部）——零基础自学网页制...

添加表格头部信息与脚部信息

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

昨天我们在《使用HTML添加表格1(基本元素)——零基础自学网页制作》(文章结尾有目录)中学习了如何向网页中添加基础表格，今天我们来学习如何为基础表格添加表头和表脚信息。先看看效果吧。

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

老规矩，先介绍表头和表脚的标签。

表头：

这个标签只是告诉页面这里是表头，如果添加文字的话还需要

列标签和行标签。

如果要添加表头的话，直接在代码中添加这个标签是不行的，我们还需要将其他表格内容放置到

中，这样html才能知道哪里是表格内容，哪里是表头内容。

示例代码如下所示：

表格标题

表格的头部信息
姓名	年龄
一列一行	一列二行
二列一行	二列二行

代码效果如图：

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

大家通过观察发现，表格的标题标签

虽然写在里面，但是显示的时候，却一直在表格的最上面。

合并单元格操作：我们希望表头信息能够在表格中独占一列，这样就需要介绍如何修改

行标签中的colspan属性。

示例代码如下：

表格的头部信息

修改后效果如下：

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

colspan的意思就是"列合并"，col是column(列、纵队)的缩写，span是跨度的意思。

colspan就是为

列标签指定跨越几个列向单元格。

这里我们要合并两个，故colspan="2"，2一定要用半角引号引起来！

那合并行单元格的属性是什么呢？其实反推一下也能猜出。行的英文是row，因此rowspan就是"行合并"。

代码示例如下：我们把"一行一列"和"二行一列"纵向合并。

一列一行一列二行二列二行

效果如图所示：

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

大家注意，如果您合并成了"一行一列"，那就要把"二列一行"删掉。

最后，我们来写一下表格的脚部信息。

脚部标签如下：

使用方法和一样，在中间添加列行标签来显示内容。

同时也要给

行标签进行列向合并单元格，即添加colspan="2"。

示例代码如下：

表格的脚部信息

值得注意的是：这块代码的位置在之后，

之前。

示例代码如下：

表格标题

表格的头部信息
表格的脚部信息
姓名	年龄
一列一行	一列二行
	二列二行

页面效果如下：

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

今天的内容结束了。明天我们继续讲解列表元素的其他属性。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作