5.HTML表格列表标签元素介绍

[TOC]

0x00 前言简述本章将主要给各位看友介绍表格 table 与列表 list 中常用的标签元素属性，本节标签一览如下所示:

表格

定义表格，一般表格数据太多，就会下载一点显示一点. 定义表格的行，有几个就有几行定义用于表格列的属性定义表格列的组 定义表格的页眉 定义表格的主体，全部下载才显示 定义表格的页脚列表

0x01 表格元素table 标签描述: 该标签定义 HTML 表格，一个简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成，其中 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。(后续会介绍)

温馨提示:

HTML 与 XHTML 之间的差异: 在 HTML 4.01 中，table 元素的 “align” 和 “bgcolor” 属性是不被赞成使用的，在 XHTML 1.0 Strict DTD，table 元素的 “align” 和 “bgcolor” 属性是不被支持的。caption 标签描述: 该元素定义表格标题，其标签必须紧随 table 标签之后。

示例:

代码语言：javascript代码运行次数：0运行复制

定义表格标题

定义表格的表头，与表格单元数量相同就行.
定义表格单元，有几对就有几列

表格标题

这是表头
数据单元
数据单元
数据单元

温馨提示: 只能对每个表格定义一个标题,通常这个标题会被居中于表格之上。

tr 标签描述: 该元素定义表格中的行 Row，同一行可同时出现 和 元素。

th 标签描述: 该元素定义表格内的表头单元格，这部分特征是由 scope and headers 属性准确定义的。

属性:

rowspan: 属性指示单元格扩展的行数，其默认值为1；如果其值设置为0，则它将一直延伸到单元格所属的表节（、、，即使隐式定义）的末尾colspan: 属性包含一个正整数表示了每单元格中扩展列的数量。headers: 属性包含了一个空间分隔的字符串的列表，每个与其他元素相关联的id 属性一一对应。scope:枚举属性定义了表头元素 (在中定义) 关联的单元格。 row: 表头关联一行中所有的单元格。

col: 表头关联一列中所有的单元格。

rowgroup:表头属于一个行组并与其中所有单元格相关联。这些单元格可以被放在表头的左侧或右侧，取决于

元素中 dir 属性的值。

colgroup: 表头属于一个列组并与其中所有单元格相关联。

auto

td 标签描述: 该

）标签用来定义表中的一组列表。

属性:

span: 此属性包含一个正整数, 指示

元素跨越的连续列数, 如果不存在，则其默认值为1withd: 此属性为当前列组中的每个列指定默认宽度, 可能采用特殊形式 0 或者 0.5表示组中每一列的宽度应为保持列内容所需的最小宽度。col 标签描述: 在HTML 元素 定义表格中的列，并用于定义所有公共单元格上的公共语义, 它通常位于 元素内。

属性: 与 colgroup 标签类似。

示例:

代码语言：javascript代码运行次数：0运行复制

元素，定义了一个包含数据的表格单元格 属性: 参考 th 标签属性 示例: 代码语言：javascript代码运行次数：0运行复制 100 100 200 300 姓名 电话 电话 Bill Gates 555 77 854 555 77 855 姓名 Bill Gates 电话 555 77 854 电话 555 77 855 姓名 电话 Bill Gates 555 77 854 555 77 855 姓名 Bill Gates 电话 555 77 854 555 77 855 WeiyiGeek.演示如何定义跨行或跨列的表格单元格图 温馨提示: 上述演示如何定义跨行或跨列的表格单元格。 表格综合示例 代码语言：javascript代码运行次数：0运行复制 常规表格示例 班级 人数 优生率 一班 30 90% 二班 50 80% 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格头由 th 标签指定。 每个表格数据由 td 标签开始。 Color names and values Name HEX HSLa RGBa Teal #51F6F6 hsla(180, 90%, 64%, 1) rgba(81, 246, 246, 1) Goldenrod #F6BC57 hsla(38, 90%, 65%, 1) rgba(246, 188, 87, 1) WeiyiGeek.table表格综合示例1结果图 colgroup 标签描述: 在 HTML 中的 表格列组（Column Group

编程开发语言

	C	C++	Python	JavaScript
Skill	Smarts	Dex, acrobat	Super speed	Super speed

执行结果:

WeiyiGeek.colgroup与col标签图

温馨提示:

[] : 如果您希望在 colgroup 内部为每个列规定不同的属性值时，请使用此元素。如果没有 col 元素，列会从 colgroup 那里继承所有的属性值。[] : col 元素是仅包含属性的空元素, 如需创建列，您就必须在 tr 元素内部规定 td 元素。thead 标签描述: 该元素定义了一组定义表格的列头的行, 通常该元素应该与 和 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动，当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

tbody 标签描述: 该 HTML 元素封装了一系列表格的行（ 元素），代表了它们是表格（

）主要内容的组成部分。

tfoot 标签描述: 该HTML 元素

定义了一组表格中各列的汇总行, 其包含的元素永远在table底部。

示例:

代码语言：javascript代码运行次数：0运行复制

表格标题

Items	Expenditure
文具；信纸；信笺	支出；开支；
文具；信纸；信笺	支出；开支；
Donuts	3,000
Stationery	18,000

执行结果:

WeiyiGeek.thead-tbody-tfoot标签结果图

温馨提示: thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。