html 在线表格,HTML 表格

HTML

表格(Tables)

HTML 表格例子:

Firstname

Lastname

Points

Jack

Woo

90

Eve

Jackson

94

John

Doe

80

Adam

Johnson

67

亲自试一试 - 例子

基本的表格

示例演示了如何创建一个基本的表格

有边框的表格

示例演示了如何给表格添加边框

收缩边框的表格

示例演示了如何创建收缩的边框的表格

HTML 表格(Tables)

表单的定义表示是

表格由行组成，标签是

(tr是table row的缩写)

行内可以分割成数据单元格列，标签是

(td是table data的缩写)

行也可以分割成标题列，标签是

(th是table heading的缩写)

元素是在表格用于存放数据 元素可以包含各种各样的HTML元素，像文本，图片，列表，其他表格等.

表格的宽度可以使用css定义.

例子

Jack	Woo	90
Eve	Jackson	94

亲自试一试 »

带边框(border)的表格

如果你没有为表格指定边框，表格就不会显示边框.

边框可以通过border属性添加：

例子

Jack	Woo	90
Eve	Jackson	94

亲自试一试 »

不过，border属性在HTML标准中已经不建议属性

However, the border attribute is on its way out of the HTML standard!

最好使用CSS样式

使用Css添加边框，需要使用border属性：

例子

table,th,td

{

border:1px solid black;

}

亲自试一试 »

定义边框时，需要对表格和单元格同时定义.

收缩边框的表格

如果你想把表格收缩成一个边框边界，使用css中的border-collapse属性：

例子

table,th,td

{

border:1px solid black;

border-collapse:collapse

}

亲自试一试 »

带内边距的表格

内边距指单元格中的内容与边框之间的距离.

如果你没有指定内边距，单元格将不显示内边距.

可以使用CSS的padding属性设置内边距:

例子

th,td

{

padding:15px;

}

亲自试一试 »

表格标题(heading)

表格的标题使用

标签定义.

默认情况下，所有的主流浏览器显示标题标题的样式都是粗体和居中：

例子

Firstname	Lastname	Points
Eve	Jackson	94

亲自试一试 »

如果想让表格标题居左对齐，需要使用CSS中的text-align属性：

例子

th

{

text-align:left;

}

亲自试一试 »

单元格间距：

单元格间距是指单元格间的距离.

使用CSS中的border-spacing的属性设置单元格间距:

例子

table

{

border-spacing:5px;

}

亲自试一试 »

更多例子

设置水平/垂直的表格标题

示例演示了如何创建水平/垂直的表格标题.

表格说明

示例演示了如何给表格添加说明.

单元格中行/列的合并和拆分

示例演示了如何定义合并或拆分单元格.

表格内的标签

示例演示了如何在表格中放置其他元素.