第三章 表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示。

3.1.2 表格的基本语法

在 HTML 中，常用表格主要通过5个标记来构成:<table>，<caption>，<th>，<tr>和<td>。

(1)table标记是成对标记，<table>表示表格开始，</table>表示表格结束。

(2)caption 标记是成对标记，<caption>表示标题开始，</caption>表示标题结束。使用

caption标记可以给表格添加标题，该标题应位于table 标记与t标记之间的位置。

(3)tr (Table Row)标记是成对标记，<tr>表示行开始，</tr>表示行结束。

(4)th (Table Heading 表头)标记是成对标记，<th>表示表头开始，</th>表示表头结束，设计表格时，表头常常作为表格的第1行或者第1列，用来对表格单元的内行说明。表头文字内容一般居中、加粗显示。

(5)td (Table Data)标记是成对标记，定义单元格或列。以<td>开始，以</td>结束表头可以用 th标记定义，也可以用td 标记定义，但<td></td>两标记之间的内容不自动居中、不加粗。
在一个表格中，可以插人多个tr标记，表示多行，一组<tr></tr>标记表示插入一行一行中可以有多个列，列中的内容可以是文字、数据、图像、超链接、表单元素等。

3.2 表格属性的设置

属性	取值	说明
align	left | center | right	规定表格相对周围元素的对齐方式
bgcolor	#rrggbb  colorname b(r%,g%,b%) rgb(rr,gg,bb)	规定表格的背景颜色
border	pixels	规定表格边框宽度
cellpadding	pixels | *%	规定单元边沿与其内容之间的空白
cellspacing	pixels | *%	规定单元格之间的空白
frame	above | below | hsides | vsides | lhs | rhs | border | void	规定外边框的那部分是可见的
rules	none | all | rows | colslgroups	规定内测边框的那部分是可见的
height	*% | pixels	规定表格高度
width	*% | pixels	规定表格宽度

3.2.1 表格边框属性

边框属性	说明	边框属性	说明
borde	表示表格边框粗细	bordercolorlight	表示表格亮边框颜色
bordercolor	表示表格边框颜色	bordercolordark	表示表格暗边形颜色

3.2.2 表格的宽度和高度属性

属性	说明
width	定义表格的宽度
height	定义表格的长度

3.2.3 表格背景颜色与表格图像属性

 

属性	说明
bgcolor	设置背景颜色
background	设置背景的图像

3.2.4 表格边框样式属性

frame属性值	说明	frame属性值	说明
above	显示上边框	all	显示所有内部边框
below	显示下边框	none	不显示内部边框
hsides	显示上下边框	rows	仅显示行边框
vsides	显示左右边框	cols	仅显示列边框
lhs	显示左边框	groups	显示介于行列间边框
rhs	显示右边框	border	显示上下左右边框
void	不显示边框

3.2.5 表格单元格间距、单元格边距属性

属性	说明
cellspacing	设置单元格之间的间距，单位可以是百分比或者像素，默认值为2px
cellpadding	设置单元格边距

3.2.6 表格水平对齐属性

对齐方式也是三种：居中（center）、左对齐（left）、右对齐（right）

3.2.7 设置表格的（tr）标记行的属性

属性值	说明	属性	说明
align	行内容水平对齐	bordercolor	行的边框颜色
valign	行内容垂直对齐	bordercolorlight	行的亮边框颜色

3.2.8 设置单元格的属性

属性值	说明	属性值	说明
height	单元格高度	width	单元格宽度
bordercolor	单元格的边框颜色	colspan