java中html5表格_HTML表格（table标签）

在 HTML 中，我们使用

一个完整的表格由多个标签构成，我们不妨先来看一段简单的 HTML 代码：

网站	域名	分类
C语言中文网	c.biancheng.net	在线教育
百度	www.baidu.com	搜索引擎
当当	www.dangdang.com	图书电商
网易	www.163.com	综合门户

运行效果如下图：

图1：简单的 HTML 表格演示

这是一个 5 行 3 列的表格，第一行为表头，其余三行为内容。

上述代码使用了

标签来为表格设置标题，标题用来描述表格的内容。默认情况下，标题位于表格的开头，居中显示。

和	四个标签： 之间。
是 table datacell 的缩写，表示单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线等多种形式。	是 table heading 的简称，表示表头。	其实是	的一种变体，它本质上还是单元格；	一般位于表格的第一行，充当每一列的标题。大多数浏览器会把	显示为加粗居中的文本。 默认情况下，表格是没有边框的，但是我们可以使用 空单元格 即使一个单元格中没有任何内容(空单元格)，我们仍然需要使用	或者	标签来占位，以保持行和列的对应关系。 另外，有些浏览器(例如低版本的 IE)无法显示出空单元格的边框，所以建议在空单元格中额外添加一个 转义字符(表示空格)，让单元格中增加不可见的内容，这样既显示出了边框，也不影响用户体验。 图2：IE7 下空单元格的显示效果 表格边框的合并 细心的读者可能已经发现，上例中演示的表格为双层边框，而真实网页中的表格一般为单层边框，为了达到这种效果，我们可以使用 CSS 的 border-collapse 属性来设置表格的边框。 border-collapse 是“边框塌陷”的意思，当它的值为collapse时，就可以使表格的双边框变成单边框。border-collapse 必须用于 请读者自行修改上例中的代码，然后在浏览器中运行，效果如下： 图3：单边框表格 style="border-collapse: collapse;"是 CSS 中的一种写法，初学者可能看不懂，不过没关系，暂时记住即可，后续学了 CSS 就豁然开朗了。 表格的标题 HTML 允许使用

标题：国内知名网站汇总

网站	域名	分类
C语言中文网	c.biancheng.net	在线教育
百度	www.baidu.com	搜索引擎
当当	www.dangdang.com	图书电商
网易	www.163.com	综合门户

在浏览器中的运行效果：

图4：表格标题的演示效果

单元格的合并

和 Excel 类似，HTML 也支持单元格的合并，包括跨行合并和跨列合并。跨行合并使用 rowspan 属性，跨列合并使用 colspan 属性，它们的具体格式如下：

单元格内容单元格内容

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

下面的例子中，我们将表格第1列的第3、4行单元格合并(跨行合并)，将第5行的第2、3列合并(跨列合并)，代码如下：

标题：国内知名网站汇总

网站	域名	分类
C语言中文网	c.biancheng.net	在线教育
百度	www.baidu.com	搜索引擎
	www.dangdang.com	图书电商
网易	www.163.com

在浏览器中的运行效果：

图5：合并单元格的演示效果

通过运行结果可以发现：

rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格。

每次合并 n 个单元格都要少写 n-1 个

标签。