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

《静态网页制作教程第三章表.ppt》由会员分享，可在线阅读，更多相关《静态网页制作教程第三章表.ppt（23页珍藏版）》请在三一办公上搜索。

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属性：用于控制存储格边框到表格边框的距离，框线的宽度。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=nN为整数，代表此存储格水平延伸的存储格数。Rowspan属性：垂直延伸存储格数,个人资料姓名居住地职业个人资料姓名居住地职业姓名个人资料居住地职业张三北京学生李四上海工程师王五深圳老师,