第8章 利用表格布局网页.ppt

1、第八章 利用表格布局网页,2010.4.3,表格是网页中用途非常广泛的工具，除了排列数据和图像外，在实际制作过程中，表格更多的用在网面定位上，只需通过表格宽度、高度、彼此之间的比例大小等，就可以把不同的网页元素分别框在不同的单元格之中以达到页面平衡。,对于网页的排版布局来说，表格是不可缺少的工具，作为一名网页设计人员，表格运用的熟练与否直接影响到网页外观的好坏。 本章着重介绍表格的基本功能及其操作，从创建表格、编辑表格、修改表格等各个方向作了详细的阐述，最后通过两个实例介绍了表格在版面布局方面的应用。,7.1 利用表格制作价格表,无论在日常生活和工作中，还是在网页设计中，使用表格都可以清晰地显

2、示列表数据，可以将各种数据排成行和列，从而更容易查找和使用信息。,7.1.1 插入表格,在插入表格前，先来熟悉一下表格的概念。表格主要有三个基本组成部分： 行：表格中的水平间隔 列：表格中的垂直间隔 单元格：表格中一行与一列相交所产生的区域。,从表格的组成来看，它与文本处理软件中的表格没有什么不同，实际上网页中的表格与文本处理软件中的表格并不一样。 利用表格可以排列数据，如例所示的域名价格表就是使用了表格的效果。,插入表格的具体步骤如下： 1打开文件夹8下面的index网页 2将光标置于要插入表格的位置，选择“插入表格”命令，弹出“表格”对话框,表格对话框主要有以下选项： 行数：在该文本框中输

3、入新表格的行数 列数：在该文本框中输入新表格的列数 表格宽度：用于设置表格的宽度，其中右边的下拉列表中包含百分比和像素两个选项。 边框粗细：用于设置表格边框的高度，如果设置为0，在浏览时看不到表格的边框,单元格边距：单元格内容与单元格之间的像素数 单元格间距：单元格之间的像素数。 页眉：可以定义表头样式，4个样式可以任意选取一种。 标题 ：用来定义表格标题的对齐方式。 摘要：用来对表格进行注释。,3在“行数”文本框中输入6，“列数”文本框中输入3，“表格宽度”文本框中输入95%，“边框粗细”文本框中输入0，“单元格边距”文本框中输入0，“单元格间距”文本框中输入0，设置完毕后，单击“确定”按钮

4、，此时页面上会出现一个6行3列的表格。,提示： 还可以通过以下方法向见面中插入表格： （1）单击“常用”插入栏的表格图标，从弹出的对话框中设置表格 （2）拖曳“常用”插入栏的表格图标至所需要的位置，在弹出的对话框中设置表格,7.1.2 在表格中输入数据,表格建立以后，就可以向表格中添加各种元素了，如文本、图像等。在表格中添加文本就同在文档中操作一样，除了直接输入文本，还可以先利用其他文本编辑器编辑文本，然后将文本拷贝到表格中，这也是在文档中添加文本的一种简捷而快速的方法,在单元格中插入图像时，如果单元格的尺寸小于插入图像的尺寸，则插入图像后单元格的尺寸会自动增高或者增宽。 操作 将光标置于单元

5、格中，然后在第个单元格输入相应的文本。,7.2 编辑表格,插入表格以后就可以通过选择、拷贝、增加、删除行，以及合、拆分单元格等一系列操作实现对表格的编辑操作。,7.2.1 选择表格对象,要想对表格进行编辑，那么首先选择它，主要有以下四种方法选取整个表格： 搬运鼠标从表格内的左上角至右下角，将所有的单元格选择中，选择菜单“编辑全选”命令。 单击表格线任意位置 将光标置于表格内任意位置，选择“修改表格选择表格”命令 将光标置于表格内任意位置，单击文档窗口中左下角的标签。,7.2.2 设置表格属性,当选取整个表格后属性面板会显示表格的属性，设置“背景颜色”为“#cccccc”，“填充”、“间距”都设

6、置为1，“边框”设置为0，“边框颜色”设置为“#999999”，设置第1行第1列的“背景颜色”为“#990000”,表格属性面板中各个选项如下： 对齐：设置表格的对齐方式 背景颜色：设置表格的背景颜色 背景图像：设置表格的背景图像 边框颜色：设置表格的边框颜色 填充：单元格内容和单元格边界之间的像素数。 间距：相邻的表格单元格间的像素娄,7.2.3 添加行和列,在已创建的表格中添加行、列，要先将光标置于欲插入行、列的单元格内，然后通过如下方式添加行 选择“修改表格插入行”命令，则在光标所在的单元格上增加了一行 选择“修改表格插入列”命令，则在光标所在的单元格械侧增加了一列,7.2.4 删除行或

7、列,将光标置于要删除行中的任意一个单元格，选择“修改表格删除行”命令就可以删除当前行。 将光标置于要删除列的任意一个单元格，选择“修改表格删除列”命令可以删除当前列。 提示： 还可以单击鼠标右键，在弹出的下拉菜单中添加行和列，删除行或列。,7.2.5 拆分与合并单元格,拆分单元格是针对于一个单元格而言的。 如果要拆分单元格，选择“修改表格拆分单元格”命令，弹出“拆分单元格”对话框 在“拆分单元格”对话框中，如果把“单元格拆分 ”选择“行”，下边将出现“行数”，然后在文本框中输入要拆分的行数。反之亦然。 如果要合并单元格需先选中要合并的单元格，然后选择“修改表格合并单元格”命令,提示 也可单击单

8、元格属性面板中的“合并单元格”按钮进行合并单元格，“拆分单元格”按钮进行拆分单元格。 合并与拆分表格命令非常有用，它往往是创建复杂表格最重要的步骤。,7.2.6 创建表格嵌套网页,说得简单点，表格的嵌套就是表格里再放表格，当遇到怎么拆分和合并都无法把表格做成想要的样子时，可以考虑表格嵌套，在一个单元格里再插入一个表格，再进行拆分和合并。 可以像对任何其他表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格的宽度的限制,提示： 创建表格时，如果开始不能确定它的属性，可以使用默认值，然后再通过属性面板进行修改。 另外，关于宽的设定，一般来说，大表格往往采用绝对尺寸，表格中所套的表格采用相对尺寸，这样定位出来的网页才不会随着显示器分辨率的