小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

表格的作用是显示二 维数 据，在 HTML 5中不再允许用表格控制 页面内容 的布局，而是采用新增的 CSS 表格特性（这里不涉及CSS，将 在后 面介绍）。下面主要介绍用于 制作 表格的HT ML 元素。

构建表格

表格的基本元素包括：table、tr和td。
table表示HTML文档中的表格，支持border属性，用于定义 表格边框 的 宽 度；
tr表示表格中的行；
td表示表格中的单元格，包括如下属性：
1）colspan：规定单元格可横跨的列数；
2）rowspan：规定单元格可横跨的行数；
3）headers：规定与单元格相关的标头，该属性不会在普通浏览器中产生任何视觉变化，但可以被屏幕 阅读器 使用。

Apples	Green	Medium
Oranges	Orange	L arg e

上面定义了一个两行、三列的表格，使用表格的好处是：浏览器会保证列的宽度满足最宽的内容，让行的高度满足最高的单元格。

表格边框

使用table元素的border属性，可以为表格添加边框。

Apples	Green	Medium
Oranges	Orange	Large

浏览器的默认边框不太美观，通常还需要用CSS来为为各种元素重设边框样式。

不规则表格

使用单元格的colspan和rowspan属性可以构建不规则表格，使表格的某些行 或者 列跨越多个单元格，下面是一个单元格跨多列的一个例子：

Month Savings

January

Fe br uary

下面是一个单元格跨多行的一个例子：

Month Savings

January	$100.00	$50
February	$10.00

表头

th元素用于为表格添加表头，可以用来区分数据和对数据的说明。th元素支持如下属性：
1）colspan：规定单元格可横跨的列数；
2）rowspan：规定单元格可横跨的行数；
3）sco PE ：定义将表头数据与单元数据相关联的方法；
3）headers：由空格分隔的表头单元格ID列表，为数据单元格提供表头信息，该属性不会在普通浏览器中产生任何视觉变化，但可以被屏幕阅读器使用。

Rank N am e Color Size Favor IT e: 2nd Favorite: 3rd Favorite:

Apples	Green	Medium
Oranges	Orange	Large
Pomegranate	A kind of greeny- red	VAR ies From medium to large

可以在一行中混合使用th和td。

让单元格关联表头

使用td的headers属性可以将单元格和表头关联，关联的目的主要是供屏幕阅读器和其他残障辅助技 术 用来 简化 对表格的处理。headers属性可以为一个或多个th单元格的id属性值：

Name Em ai l Phone Address

Ge org e Bush	someone@example .COM	+7894 512 36	Fifth Avenue New York,USA

构造复杂表头

使用th的colspan和rowspan属性可以构造复杂表头。

Company in USA Name Addr

Apple, Inc.	1 Infinite Loop Cupertino, CA 95014
GOOGLE , Inc.	1600 Amphitheatre Parkway mount ain View, CA 94043

为表格添加结构

可以使用thead、tbody和tfoot元素来为表格添加结构，这样可以让为表格各个部分添加CSS样式变得更加容易。
1）表格主题
tbody元素表示构成表格主题的全体行，不包括表头行（thead元素表示）和表脚行（tfoot元素表示）。
注意大多数浏览器在处理table元素时都会自动插入tbody元素。
2）表格表头
thead元素用来标记表格的标题行。如果没有thead元素的话，所有tr元素都会被视为表格 主体 的一部分。
3）添加脚注
tfoot元素用来标记组成表脚的行。在HTML5之前tfoot元素只能出现在tbody元素之前，而在HTML5中则允许将tfoot元素放在tbody之后。
下面是一个综合的例子，里面使用了tbody、thead和tfoot元素。

Rank Name Color Size Rank Name Color Size Favorite: 2nd Favorite: 3rd Favorite:

Apples	Green	Medium
Oranges	Orange	Large
Pomegranate	A kind of greeny-red	Varies f rom medium to large

为表格添加标题

使用caption元素可以为表格定义一个标题，并将其与表格关联起来。

Results of the 2011 Fruit Survey Rank Name Color Size Rank Name Color Size Favorite: 2nd Favorite: 3rd Favorite:

Apples	Green	Medium
Oranges	Orange	Large
Pomegranate	A kind of greeny-red	Varies from medium to large

一个表格只能包含一个caption元素，无需是表格的第一个元素，但始终显示在表格上方。

列分组

在表格中，由于表格都是按行组建的，导致对列的操作不太方便，例如为表格的某列定义样式。可以使用colgroup元素来指定列的分组。

# colgroup1{background-color: red} #colgroup2{background-color: green; font -s ize=small} ISBN Title PR ice

3476896	My First HTML	$53
2489604	My first CSS	$47

上面的例子中指定了两个列的组，第一个包含前2列，第二个包含剩下的1列，并为不同的分组指定了不同的样式。colgroup的span属性指定扩展几列，如果不指定span属性，也可以指定一个或多个col元素，下面的例子达到了和上面例子一样的效果。

#colgroup1{background-color: red} #col3{background-color: green; font-size=small} ISBN Title Price

3476896	My first HTML	$53
2489604	My first CSS	$47

表格的作用是显示二维数据，在HTML5中不再允许用表格控制页面内容的布局，而是采用新增的CSS表格特性（这里不涉及CSS，将在后面介绍）。下面主要介绍用于制作表格的HTML元素。

构建表格

表格的基本元素包括：table、tr和td。
table表示HTML文档中的表格，支持border属性，用于定义表格边框的宽度；
tr表示表格中的行；
td表示表格中的单元格，包括如下属性：
1）colspan：规定单元格可横跨的列数；
2）rowspan：规定单元格可横跨的行数；
3）headers：规定与单元格相关的标头，该属性不会在普通浏览器中产生任何视觉变化，但可以被屏幕阅读器使用。

Apples	Green	Medium
Oranges	Orange	Large

上面定义了一个两行、三列的表格，使用表格的好处是：浏览器会保证列的宽度满足最宽的内容，让行的高度满足最高的单元格。

表格边框

使用table元素的border属性，可以为表格添加边框。

Apples	Green	Medium
Oranges	Orange	Large

浏览器的默认边框不太美观，通常还需要用CSS来为为各种元素重设边框样式。

不规则表格

使用单元格的colspan和rowspan属性可以构建不规则表格，使表格的某些行或者列跨越多个单元格，下面是一个单元格跨多列的一个例子：

Month Savings

January

February

下面是一个单元格跨多行的一个例子：

Month Savings

January	$100.00	$50
February	$10.00

表头

th元素用于为表格添加表头，可以用来区分数据和对数据的说明。th元素支持如下属性：
1）colspan：规定单元格可横跨的列数；
2）rowspan：规定单元格可横跨的行数；
3）scope：定义将表头数据与单元数据相关联的方法；
3）headers：由空格分隔的表头单元格ID列表，为数据单元格提供表头信息，该属性不会在普通浏览器中产生任何视觉变化，但可以被屏幕阅读器使用。

Rank Name Color Size Favorite: 2nd Favorite: 3rd Favorite:

Apples	Green	Medium
Oranges	Orange	Large
Pomegranate	A kind of greeny-red	Varies from medium to large

可以在一行中混合使用th和td。

让单元格关联表头

使用td的headers属性可以将单元格和表头关联，关联的目的主要是供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。headers属性可以为一个或多个th单元格的id属性值：

Name Email Phone Address

George Bush	someone@example.com	+789451236	Fifth Avenue New York,USA

构造复杂表头

使用th的colspan和rowspan属性可以构造复杂表头。

Company in USA Name Addr

Apple, Inc.	1 Infinite Loop Cupertino, CA 95014
Google, Inc.	1600 Amphitheatre Parkway Mountain View, CA 94043

为表格添加结构

可以使用thead、tbody和tfoot元素来为表格添加结构，这样可以让为表格各个部分添加CSS样式变得更加容易。
1）表格主题
tbody元素表示构成表格主题的全体行，不包括表头行（thead元素表示）和表脚行（tfoot元素表示）。
注意大多数浏览器在处理table元素时都会自动插入tbody元素。
2）表格表头
thead元素用来标记表格的标题行。如果没有thead元素的话，所有tr元素都会被视为表格主体的一部分。
3）添加脚注
tfoot元素用来标记组成表脚的行。在HTML5之前tfoot元素只能出现在tbody元素之前，而在HTML5中则允许将tfoot元素放在tbody之后。
下面是一个综合的例子，里面使用了tbody、thead和tfoot元素。

Rank Name Color Size Rank Name Color Size Favorite: 2nd Favorite: 3rd Favorite:

Apples	Green	Medium
Oranges	Orange	Large
Pomegranate	A kind of greeny-red	Varies from medium to large

为表格添加标题

使用caption元素可以为表格定义一个标题，并将其与表格关联起来。

Results of the 2011 Fruit Survey Rank Name Color Size Rank Name Color Size Favorite: 2nd Favorite: 3rd Favorite:

Apples	Green	Medium
Oranges	Orange	Large
Pomegranate	A kind of greeny-red	Varies from medium to large

一个表格只能包含一个caption元素，无需是表格的第一个元素，但始终显示在表格上方。

列分组

在表格中，由于表格都是按行组建的，导致对列的操作不太方便，例如为表格的某列定义样式。可以使用colgroup元素来指定列的分组。

#colgroup1{background-color: red} #colgroup2{background-color: green; font-size=small} ISBN Title Price

3476896	My first HTML	$53
2489604	My first CSS	$47

上面的例子中指定了两个列的组，第一个包含前2列，第二个包含剩下的1列，并为不同的分组指定了不同的样式。colgroup的span属性指定扩展几列，如果不指定span属性，也可以指定一个或多个col元素，下面的例子达到了和上面例子一样的效果。

#colgroup1{background-color: red} #col3{background-color: green; font-size=small} ISBN Title Price

3476896	My first HTML	$53
2489604	My first CSS	$47

觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！

总结

以上是 为你收集整理的 html5教程-HTML5：表格 全部内容，希望文章能够帮你解决 html5教程-HTML5：表格 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-HTML5：表格的详细内容...