1、第三章 表格表格在对 web页上的信息格式和布局进行控制的较好方法，它定义格式化信息有着强大的功能，能够控制各种信息的位置，使得页面结构协调一致。一 .创建一个简单表格二 .定义单元格的高度和宽度三 . 控制表格的边框及边框线四 .创建跨单元格的存储格在网页中，表格的运用是非常重要的技巧。在 html中，表格的建立主要就运用 、 、 四种标记来显示完成的1.和 标记：用于表示一个表格的组件。一个表格组件将由数个行 、存储格 、标题格 子组件所组成。2.：用于定义表格的一行，一组 标记内通常包含数组由 或 标记所定义的存储格。3.用于定义表格的存储格。4.：用于定义表格的标题存储格，此存储格中的
2、文字将以粗体的方式显示。在一个最基本的表格组件中，必须包含一组 标记，一组 标记与一组标记。语法如下：一 .创建一个简单表格1.创建一个简单的表格2.给表格添加一个标题3.如果需要，把表格的第一行设计为表头4.给单元格和表格元素定义数据1.创建一个简单的表格输入 和 标记。如果要显示表格单元格的边框，则需在 标记中添加border属性。并为 Border属性设置值。如：2.给表格添加一个标题使用 和 标记来添加标题，语法：表格标题 如果要添加的标题位于表格的上方，则将表格标题 置于 标记下一行，如：表格标题 如果要将标题置于表格下方，则将表格标题 置于 标记之前。如：表格标题 我们还可以像对待
3、其他文本一样，格式化和 中的文本表格标题 3.把表格的第一行设计为表头通过 标记来指定表格中特殊表头单元格， 标记之后的文本作为表头单元格的一部分。可以在表格的任意地方使用这个标记，表头也不是必须要放在各列的顶部。当表格的 标记和表格标题输入之后，在表格的每一列中放置一个 标记和该列中的文本。表格标题 第一列 第二列 第三列4.给单元格和表格元素定义数据使用 标记来建立单元格，并往其中添加数据，它的用法与 标记的用法十分相似。个人资料 姓名 居住地 职业 张三 北京 学生 李四 上海 工程师 王五 深圳 老师 标记的用法同 类似，表格是用来创建表格中行的。如实例所示，表格的每一行都是由 标记来
4、建立。根据需要，可把某个单元格设置成空数据格，即不输入数据到该格中，也就是在 标记之后不输入数据。李四 工程师 二 .定义单元格的高度和宽度 表格的宽度由 标记的 width属性来控制，而高度则是由 标记的 height属性来控制的。语法分别为：Width=数值Height=数值 数值的设定值若为一整数，则其单位为像素，若设定值为 n%，则代表表格的宽度为整个网页宽度的百分之 n。如： 将 width属性设为 50%，代表此表格宽度为整个网页宽度的一半。个人资料 姓名 居住地 职业 张三 北京 学生 李四 上海 工程师 王五 深圳 老师 个人资料 姓名 居住地 职业 张三 北京 学生 李四 上
5、海 工程师 王五 深圳 老师 两者设置宽度和高度的区别，当改变浏览器窗口大小的时候，用百分比设置的表格会随浏览器窗口的变化而变化，而通过像素设定宽度和高度的表格的大小不会变化。以上是对整个表格的所有单元格的高度和宽度的控制，也可以在 标记中添加width和 height属性来控制某一行的宽度和高度。如：三 . 控制表格的边框及边框线 通过 标记的属性可以控制整个表格组件的格式。1.Border属性：用来控制表格边框线的厚度，语法如下：Border=数值，数值的设定若为整数，则其单位为像素 (pixel)。2.Cellspacing属性：用于控制存储格边框到表格边框的距离，框线的宽度。Cells
6、pacing=数值3.cellpadding:用于控制存储格内文字的边缘到存储格边框的距离。cellpadding=数值设置表格的边框 姓名 居住地 职业 张三 北京 学生 李四 上海 工程师 王五 深圳 老师 4.设置表格背景颜色与边框厚度颜色标记还有两个属性Bgcolor属性：控制表格的背景颜色bordercolor属性：控制表格厚度的颜色5.设置表格的对齐方式表格对齐方式有两种：水平方向和垂直方向align(水平方向 )：Align=left（水平左对齐）Align=right(水平右对齐 )Align=center(水平居中对齐 )Valign(垂直方向 )Valign=top(垂直顶
7、部对齐 )valign=bottom(垂直底部对齐 )Valign=baseline(垂直一条公共基线对齐 )valign=middle(垂直居中对齐 ) (1).align属性可以放置于 标记中，控制整个表格在网页中的对齐方式。 靠左对齐表格 居中对齐表格 靠右对齐表格 (2).align和 valign属性也可以在 标记中控制对齐方式张三 北京 学生 李四 上海工程师 王五 深圳老师 四 .创建跨单元格的存储格我们常常会看到有的表格里的某些存储格跨了好几个单元格，这是通过 colspan和 rowspan属性来控制而达到的。Colspan属性：水平延伸存储格，语法：Colspan=nN为整数，代表此存储格水平延伸的存储格数。Rowspan属性：垂直延伸存储格数 个人资料 姓名 居住地 职业 个人资料 姓名 居住地 职业 姓名 个人资料 居住地 职业 张三 北京 学生 李四 上海 工程师 王五 深圳 老师
