使用HTML添加表格2（表格头部与脚部）-零基础自学网页制作

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

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

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

表头：<thead></thead>

这个标签只是告诉页面这里是表头，如果添加文字的话还需要<tr></tr>列标签和<td></td>行标签。

如果要添加表头的话，直接在代码中添加这个标签是不行的，我们还需要将其他表格内容放置到<tbody></tbody>中，这样html才能知道哪里是表格内容，哪里是表头内容。

示例代码如下所示：

<table border = "1" width = "100%">
  <thead><!--表头开始标签-->
  <tr>
  <td>表格的头部信息</td>
</tr>
</thead><!--表头结束标签--><tbody><!--表格内容开始标签-->
<caption>表格标题</caption>
<tr>
  <th>姓名</th>
<th>年龄</th>
</tr>
<tr>
  <td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
  <td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody><!--表格内容结束标签-->
</table>

代码效果如图：

大家通过观察发现，表格的标题标签<caption></caption>虽然写在<tbody></tbody>里面，但是显示的时候，却一直在表格的最上面。

合并单元格操作：我们希望表头信息能够在表格中独占一列，这样就需要介绍如何修改<td></td>行标签中的colspan属性。

示例代码如下：

<thead>
  <!--表头开始标签--><tr><td colspan = "2">表格的头部信息</td></tr></thead><!--表头结束标签-->

修改后效果如下：

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

colspan就是为<td></td>列标签指定跨越几个列向单元格。

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

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

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

<tr>
  <td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>

效果如图所示：

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

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

脚部标签如下：<tfoot></tfoot>

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

同时也要给<td></td>行标签进行列向合并单元格，即添加colspan="2"。

示例代码如下：

<tfoot><tr><td colspan = "2">表格的脚部信息</td></tr></tfoot>

值得注意的是：这块代码的位置在<thead></thead>之后，<tbody></tbody>之前。

示例代码如下：

<table border = "1" width = "100%">
  <thead>
  <tr>
  <td colspan = "2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
    <tr>
    <td colspan = "2">表格的脚部信息</td>
</tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>
</tbody>
</table>

页面效果如下：

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

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

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

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

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

序列表和有序列表

用于呈现逻辑上并列的具有相关性的数据内容.

<ul>
<li></li>
</ul>

ul元素可以用type属性设置不同的列表标记:

disc: 实心圆点

circle: 空心圆圈

square: 实心正方形

<ol>
<li></li>
</ol>

ol元素也可以设置不同的标记:

1: 阿拉伯数字

i: 小写罗马数字

I: 大写罗马数字

A: 大写字母

a: 小写字母

定义列表

适用呈现包含主题及描述的数据内容.

<dl>
<dt>主题</dt>
<dd>描述</dd>
</dl>

表格

<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

thead: 表头

tbody: 表体

tfoot: 表脚

th: 专用于表头中的单元格, 其具有自动加粗并且居中的效果.

表格的属性控制:

border: 边框

bordercolor: 边框颜色

width: 宽度

height: 高度

cellspacing: 单元格间距(外)

cellpadding: 单元格填充(内)

align: 表格的位置控制

单元格的属性控制:

align

valign

如何合并单元格/跨行或跨列?

注意: 合并后, 会引发单元格数量的减少!

列表练习案例源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的电脑文件列表</h1>
<ul>
<li>我的电脑
<ul>
<li>本地磁盘(C:)
<ul>
<li>我的文档</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盘(D:)
<ul>
<li>我的游戏</li>
<li>我的资料</li>
<li>我的电影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

决html布局中的块上下左右间距保持一致，常用在一些栏目展示栏中，要使上下左右的间距等距离，使用该方法非常简单！效果：

html:

css:

在线咨询

上一篇：如何通俗易懂的向面试官解释什么是 RPC 框架
下一篇：php手把手教你做网站（二十一）vue使用wangEditor富文本编辑器

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商