表格的作用是显示二维数据，在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 |
使用单元格的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: | Apples | Green | Medium |
| 2nd Favorite: | Oranges | Orange | Large |
| 3rd Favorite: | Pomegranate | A kind of greeny-red | Varies from medium to large |
使用td的headers属性可以将单元格和表头关联，关联的目的主要是供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。headers属性可以为一个或多个th单元格的id属性值：
| Name | 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: | Apples | Green | Medium |
| 2nd Favorite: | Oranges | Orange | Large |
| 3rd Favorite: | Pomegranate | A kind of greeny-red | Varies from medium to large |
使用caption元素可以为表格定义一个标题，并将其与表格关联起来。
| Rank | Name | Color | Size |
|---|---|---|---|
| Rank | Name | Color | Size |
| Favorite: | Apples | Green | Medium |
| 2nd Favorite: | Oranges | Orange | Large |
| 3rd Favorite: | Pomegranate | A kind of greeny-red | Varies from medium to large |
在表格中，由于表格都是按行组建的，导致对列的操作不太方便，例如为表格的某列定义样式。可以使用colgroup元素来指定列的分组。
| ISBN | Title | Price |
|---|---|---|
| 3476896 | My first HTML | $53 |
| 2489604 | My first CSS | $47 |
| ISBN | Title | Price |
|---|---|---|
| 3476896 | My first HTML | $53 |
| 2489604 | My first CSS | $47 |
如对本文有疑问， 点击进行留言回复！！
我要评论
网友评论