HTML 标签（表格）

#HTML 标签（表格）| 来源: 网络整理| 查看: 265

首页 > HTML HTML 标签（表格）在 HTML 中，我们使用标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。在学习表格之前，我们不妨先来看一段简单的 HTML 代码：名称官网性质 C语言中文网 http://c.biancheng.net/ 教育百度 http://www.baidu.com/ 搜索当当 http://www.dangdang.com/ 图书运行效果如下图：图1：普通 table 表格这是一个 4 行 3 列的表格。第一行为表头，其余三行为内容。在上述代码中，我们使用了、、及四个标签：表示表格，表格的所有内容需要写在和之间。是 table row 的简称，表示表格的行。表格中有多少个标签就表示有多少行数据。是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。是 table heading 的简称，表示表格的表头。其实是单元格的一种变体，本质上还是一种单元格。一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。默认情况下，表格是没有边框的。但是我们可以使用标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。本例中我们将表格的边框宽度设置为 1px。注意，px 是默认的单位，不用显式指明。 1. 表格的边框合并：细心的读者可能已经发现了，网页中常见的表格样式大多为单层边框，上例中展示的表格为双层边框。为了避免这种情况，我们可以利用 CSS 中的 border-collapse 属性来设置表格的边框。border-collapse 是“边框塌陷”的意思，当属性值为 collapse 时，可以使表格的双边框变为单边框。示例代码如下：名称官网性质 C语言中文网 http://c.biancheng.net/ 教育百度 http://www.baidu.com/ 搜索当当 http://www.dangdang.com/ 图书运行效果如下图所示：图2：合并边框后的表格 2. 表格的标题 HTML 允许使用标签来为表格设置标题，标题用来描述表格的内容。我们常见的表格一般都有标题，表格的标题使用标签来表示。默认情况下，表格的标题位于整个表格的第一行并且居中显示。一个表格只能有一个标题，也就是说标签中只能有一个标签。请看下面的例子：这是表格的标题名称官网性质 C语言中文网 http://c.biancheng.net/ 教育 http://www.baidu.com/ 搜索当当 http://www.dangdang.com/ 图书浏览器运行结果如图：图3：带标题的表格 3. 单元格的合并和 Excel 类似，HTML 也支持单元格的合并，包括跨行合并和跨列合并两种。 rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。 colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。具体格式如下：

单元格内容单元格内容

n 是一个整数，表示要合并的行数或者列数。

此处需注意，不论是 rowspan 还是 colspan 都是标签的属性。

下面的例子中，我们将表格第 1 列的第 3、4 行单元格合并（跨行合并），将第 4 行的第 2、3 列合并（跨列合并）。具体代码如下：名称官网性质 C语言中文网 http://c.biancheng.net/ 教育百度 http://www.baidu.com/ 搜索 http://www.dangdang.com/ 运行效果如图：图4：合并单元格后的表格通过运行结果可以发现： rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。每次合并 n 个单元格都要少写 n-1 个标签。

提示：即使一个单元格中没有任何内容，我们仍需使用或元素来表示一个空单元格的存在，建议在或中加入 ;（空格），否则低版本的 IE 可能无法显示出这个单元格的边框。

关注公众号「站长严长生」，在手机上阅读所有教程，随时随地都能学习。内含一款搜索神器，免费下载全网书籍和视频。

微信扫码关注公众号

推荐阅读一套完整的嵌入式开发学习路线（高薪就业版）一套课程卖1万，TMD太贵了！跑了3000公里，见了一位大佬 C语言联合（union）的定义和初始化 MMU部件以及对内存权限的控制 Python reversed函数及用法 Java注释：单行、多行和文档注释 FTP的基本使用（非常详细） Redis INCR命令时间复杂度和空间复杂度

【本文地址】

HTML 标签（表格）

HTML 标签（表格）

今日新闻

推荐新闻