静态网页制作教程 第三章 表格

1、表格在对web页上的信息格式和布局进行控制 的较好方法，它定义格式化信息有着强大的功 能，能够控制各种信息的位置，使得页面结构 协调一致。 一.创建一个简单表格 二.定义单元格的高度和宽度 三. 控制表格的边框及边框线 四.创建跨单元格的存储格 在网页中，表格的运用是非常重要的技巧。 在html中，表格的建立主要就运用、 、四种标记来显示完成的 1.和标记：用于表示一个表 格的组件。一个表格组件将由数个行、 存储格、标题格子组件所组成。 2.：用于定义表格的一行，一组 标记内通常包含数组由或标记 所定义的存储格。 3.用于定义表格的存储格。 4.：用于定义表格的标题存储格， 此存储格中的文字将

2、以粗体的方式显示。 在一个最基本的表格组件中，必须包含 一组标记，一组标记与一组 标记。语法如下： 1.创建一个简单的表格 2.给表格添加一个标题 3.如果需要，把表格的第一行设计为表头 4.给单元格和表格元素定义数据 输入和标记。如果要显示表 格单元格的边框，则需在标记中添加 border属性。并为Border属性设置值。如： 使用和标记来添加标 题，语法： 表格标题 如果要添加的标题位于表格的上方，则将 表格标题置于 标记下一行，如： 表格标题 如果要将标题置于表格下方，则将 表格标题置于 标记之前。如： 表格标题 我们还可以像对待其他文本一样，格式化 和中的文本 表格标题 通过标记来指定

3、表格中特殊表头单元格， 标记之后的文本作为表头单元格的一部 分。可以在表格的任意地方使用这个标记， 表头也不是必须要放在各列的顶部。 当表格的标记和表格标题输入之后， 在表格的每一列中放置一个标记和该列 中的文本。 表格标题 第一列第二列第三列 使用标记来建立单元格，并往其中添加 数据，它的用法与标记的用法十分相似。 个人资料 姓名居住地职业 张三北京学生 李四上海工程师 王五深圳老师 标记的用法同类似，表格是用来创 建表格中行的。如实例所示，表格的每一行 都是由标记来建立。 根据需要，可把某个单元格设置成空数据格， 即不输入数据到该格中，也就是在标记 之后不输入数据。 李四工程师 表格的宽度

4、由标记的width属性来控制，而 高度则是由标记的height属性来控制的。语 法分别为： Width=数值 Height=数值 数值的设定值若为一整数，则其单位为像素，若设 定值为n%，则代表表格的宽度为整个网页宽度的百 分之n。如： 将width属性设为50%，代表此表格宽度为整个网页 宽度的一半。 个人资料 姓名居住地职业 张三北京学生 李四上海工程师 王五深圳老师 个人资料 姓名居住地职业 张三北京学生 李四上海工程师 王五深圳老师 两者设置宽度和高度的区别，当改变浏览 器窗口大小的时候，用百分比设置的表格 会随浏览器窗口的变化而变化，而通过像 素设定宽度和高度的表格的大小不会变化。

5、以上是对整个表格的所有单元格的高度和 宽度的控制，也可以在标记中添加 width和height属性来控制某一行的宽度 和高度。如： 通过标记的属性可以控制整个表格组件的 格式。 1.Border属性：用来控制表格边框线的厚度，语法 如下： Border=数值，数值的设定若为整数，则其单位为 像素(pixel)。 2.Cellspacing属性：用于控制存储格边框到表格 边框的距离，框线的宽度。 Cellspacing=数值 3.cellpadding:用于控制存储格内文字的边缘到存 储格边框的距离。 cellpadding=数值 设置表格的边框 姓名居住地职业 张三北京学生 李四上海工程师 王

6、五深圳老师 4.设置表格背景颜色与边框厚度颜色 标记还有两个属性 Bgcolor属性：控制表格的背景颜色 bordercolor属性：控制表格厚度的颜 色 5.设置表格的对齐方式 表格对齐方式有两种：水平方向和垂直方向 align(水平方向)： Align=left（水平左对齐） Align=right(水平右对齐) Align=center(水平居中对齐) Valign(垂直方向) Valign=top(垂直顶部对齐) valign=bottom(垂直底部对齐) Valign=baseline(垂直一条公共基线对齐) valign=middle(垂直居中对齐) (1).align属性可以放置于标记中，控制整个表格 在网页中的对齐方式。 靠左对齐表格 居中对齐表格 靠右对齐表格 (2).align和valign属性也可以在标记中控制 对齐方式 张三北京 学生 李四 上海工程师 王五深 圳老师 我们常常会看到有的表格里的某些存储格跨了 好几个单元格，这是通过colspan和rowspan属 性来控制而达到的。 Colspan属性：水平延伸存储格，语法： Colspan=n N