9. HTML表格

猴子建议:本页是HTML表格系列教程的总结页,您可以点击 “创建最简单的表格” 链接,一步一步的学会创建一个表格。

表格(table),在HTML中用于呈现表格状的多维数据,一个表格中最基本的元素是行与单元格。在桌面软件中,我们经常使用Excel或Word创建表格。

HTML表格入门示例

示例说明

说明

上例是一个简单的表格示例。表格通过table标签定义,表格中可包括多个行(tr用于定义表格的行),每行可被分割成多个单元格(td用于定义表格的单元格)。表格单元格内可以包含其它HTML元素,包括文本、图像、链接、另外一个表格、表单等。

一个完善的表格通常还包含一个标题(使用caption标签定义),以明确表格的用途与说明。

可以为表格定义表头单元格(th标签用于定义表头单元格),多数浏览器会将表头单元格内的数据粗体居中显示。

表格行可分组为头部、脚部与身体三个部分(分别使用theadtfoottbody标签定义)。终端(浏览器)可以分开处理表格的thead、tfoot、tbody,当用户鼠标滚动时,只改变身体(tbody)部分的内容。当打印一个很长的表格时,thead与tfoot可以重复的打印在每页的头和尾。

表格也可以按列分组,可以在table的开始处使用colgroupcol标签对表格列分组。

表格不应用于排版布局。由于历史原因,很多网页都是使用表格控制布局。对于表格布局的页面,屏幕阅读器等工具很难在网页中导航。按照HTML5标准的要求,如果一个表格用于布局,应增加属性role="presentation",以使浏览器(用户代理)更好的解析文档中的表格数据,以表现表格。

有很多使用html表格布局的替代方案,第一个替代方案是使用css位置与css盒模式。

HTML5中,table标签的border属性可以明确的标明表格不是为了布局。border属性取值只能是空或者"1"。border属性被用于明确表格单元格是否有边框。

设计好表格的关键是使表格更加可读与可用。可视浏览器,使表格的行与列之间具有边框,交替每行的背景色,可以提高复杂表格的可读性。设计者应使用CSS实现上述效果。

什么时候需要使用一个表格?

表格通常存放列表状数据。下面是猴子想到的一些列表状数据:

等等。

什么时候不能使用一个表格?

由于表格容易控制,排版快速,早期常用于网页布局。但表格并不适用于布局,标准也不建议使用表格布局。

使用表格排版的历史由来

最初的Internet使用在学校和军方,当时只有一些简单的html标签,随着后来网络费用的降低与流行,Internet进入普通行业,但是当时的网页设计依旧很简单。

直到1997年,David Siegel出版了一本名字为 “Creating Killer Web Sites”的世界上第一本有关网页设计的书籍,描述了如何使用表格与分隔GIF设计出漂亮的网页,因此使用表格设计网页逐渐的流行了起来。

不可否认,表格为网页设计带来了一次变革,但当时并没有CSS位置与CSS盒模式。

表格排版的优缺点对比
优点 缺点
上手快 违反语义化原则
更容易控制 不利于seo
逻辑性强 可访问性差
  降低网页的加载速度
  增加网页浏览的流量费用
  降低设计者的职业竞争力

说明:

上述使用表格布局的缺点,可通过使用DIV+CSS技术解决,这种技术将引领网页设计展开新一轮变革。目前多数网站已经不再使用表格布局了,新的浏览器也能更好的支持CSS了。

表格相关标签(功能分类)

表格

HTML表格标签(字母排序)
标签 描述 关联属性 HTML4 HTML5
caption 表格标题  
table 表格 border、sortable

表格行组

HTML表格行组标签(字母排序)
标签 描述 关联属性 HTML4 HTML5
tbody 表格数据  
tfoot 表格页脚  
thead 表格页眉  

表格列组

HTML表格列组标签(字母排序)
标签 描述 关联属性 HTML4 HTML5
col 表格列 span
colgroup 表格列组 span

表格行

HTML表格行标签(字母排序)
标签 描述 关联属性 HTML4 HTML5
tr 表格行  

表格数据

HTML表格数据标签(字母排序)
标签 描述 关联属性 HTML4 HTML5
td 表格数据单元格 colspan、headers、rowspan
th 表格标题单元格 abbr、colspan、headers、rowspan、scope、sorted

表格相关标签(字母排序)

HTML表格标签(字母排序)
编号 标签 描述 关联属性 HTML4 HTML5
1 caption 表格标题  
2 col 表格列 span
3 colgroup 表格列组 span
4 table 表格 border、sortable
5 tbody 表格数据  
6 td 表格数据单元格 colspan、headers、rowspan
7 tfoot 表格页脚  
8 th 表格标题单元格 abbr、colspan、headers、
rowspan、scope、sorted
9 thead 表格页眉  
10 tr 表格行  

表格相关属性(字母排序)

HTML表格属性索引(字母排序)
编号 属性 描述 关联标签 取值 默认值 HTML4 HTML5
1 abbr 表格标题单元格缩写 th text  
2 border 表格是否用于布局 table "" 或 1    
3 colspan 单元格跨越的列数 th、td number 1
4 headers 关联表格标题与数据单元格 th、td idrefs  
5 rowspan 单元格跨越的行数 th、td number 1
6 scope 关联表格标题单元格与数据单元格 th row, col, rowgroup, colgroup, auto auto
7 sortable 允许表格排序 table 布尔属性    
8 sorted 表格列排序方向与顺序 th 以空格分隔的标记    
9 span 元素包含的列数 col、colgroup number 1

表格不建议使用的属性(字母排序)

HTML表格不建议使用的属性索引(字母排序)
编号 属性 描述 关联标签 取值 替代
1 align 水平对齐方式 col, colgroup, tbody, td, tfoot, th, thead, tr left, center, right, justify, char CSS text-align
2 align 表格标题相对于表格元素的位置 caption top、bottom、left、right CSS caption-side
3 align 表格相对于文档的位置 table left、center、right CSS float
4 axis 分类表格单元格 td、th cdata HTML scope
5 bgcolor 元素的背景颜色 table、tr、td、th color CSS background-color
6 border 围绕元素的边框宽度 table pixels CSS border
7 cellpadding 表格填充 table length CSS padding
8 cellspacing 表格间距 table length CSS border-spacing
9 char 表格单元格以文本中的一个字符做为对齐轴 col, colgroup, tbody, td, tfoot, th, thead, tr character CSS text-align
10 charoff 表格单元格每行第一个对齐字符的偏移量 col, colgroup, tbody, td, tfoot, th, thead, tr length CSS text-align
11 frame 围绕表格的可见边框 table void, above, below, hsides, lhs, rhs, vsides, box, border CSS border
12 height 元素的高度 td、th length CSS height
13 nowrap 禁止表格单元格内的文本自动换行 td、th 布尔属性 CSS white-space
14 rules 表格单元格之间边框的显示规则 table none, groups, rows, cols, all CSS border
15 summary 表格摘要 table text HTML caption
16 valign 表格单元格内数据的垂直位置 col, colgroup, tbody, td, tfoot, th, thead, tr top, middle, bottom, baseline CSS vertical-align
17 width 元素的宽度 table、td, th、col、colgroup length CSS width

与表格相关的示例

HTML表格入门示例 << 尝试编辑

本例展示了最简单的HTML表格

创建最简单的表格示例 << 尝试编辑

本例创建了最简单的HTML表格

表格的边框示例 << 尝试编辑

本例展示了HTML表格的边框

单一表格边框示例 << 尝试编辑

本例展示了表格的单一边框

表格内容的对齐方式示例 << 尝试编辑

本例展示了表格内容的对齐方式