第8章 利用表格布局网页
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
将光标置于单元格中,然后在第个单元格输 入相应的文本。
7.2 编辑表格
插入表格以后就可以通过选择、拷贝、 增加、删除行,以及合、拆分单元格等 一系列操作实现对表格的编辑操作。
7.2.1 选择表格对象
要想对表格进行编辑,那么首先选择它,主要 有以下四种方法选取整个表格:
搬运鼠标从表格内的左上角至右下角,将所有的单 元格选择中,选择菜单“编辑》全选”命令。 单击表格线任意位置 将光标置于表格内任意位置,选择“修改》表格》 选择表格”命令 将光标置于表格内任意位置,单击文档窗口中左下 角的<table>标签。
7.2.3 添加行和列
在已创建的表格中添加行、列,要先将 光标置于欲插入行、列的单元格内,然 后通过如下方式添加行 选择“修改》表格》插入行”命令,则 在光标所在的单元格上增加了一行 选择“修改》表格》插入列”命令,则 在光标所在的单元格械侧增加了一列
7.2.4 删除行或列
将光标置于要删除行中的任意一个单元格,选 择“修改》表格》删除行”命来自百度文库就可以删除当 前行。 将光标置于要删除列的任意一个单元格,选择 “修改》表格》删除列”命令可以删除当前列。 提示:
还可以单击鼠标右键,在弹出的下拉菜单中添加行 和列,删除行或列。
7.2.5 拆分与合并单元格
拆分单元格是针对于一个单元格而言的。
如果要拆分单元格,选择“修改》表格》拆 分单元格”命令,弹出“拆分单元格”对话 框 在“拆分单元格”对话框中,如果把“单元 格拆分 ”选择“行”,下边将出现“行 数”,然后在文本框中输入要拆分的行数。 反之亦然。 如果要合并单元格需先选中要合并的单元格, 然后选择“修改》表格》合并单元格”命令
提示
也可单击单元格属性面板中的“合并单元格” 按钮进行合并单元格,“拆分单元格”按钮 进行拆分单元格。 合并与拆分表格命令非常有用,它往往是创 建复杂表格最重要的步骤。
7.2.6 创建表格嵌套网页
说得简单点,表格的嵌套就是表格里再 放表格,当遇到怎么拆分和合并都无法 把表格做成想要的样子时,可以考虑表 格嵌套,在一个单元格里再插入一个表 格,再进行拆分和合并。 可以像对任何其他表格一样对嵌套表格 进行格式设置,但是,其宽度受它所在 单元格的宽度的限制
7.1 利用表格制作价格表
无论在日常生活和工作中,还是在网页 设计中,使用表格都可以清晰地显示列 表数据,可以将各种数据排成行和列, 从而更容易查找和使用信息。
7.1.1 插入表格
在插入表格前,先来熟悉一下表格的概 念。表格主要有三个基本组成部分:
行:表格中的水平间隔 列:表格中的垂直间隔 单元格:表格中一行与一列相交所产生的区 域。
提示:
创建表格时,如果开始不能确定它的属性, 可以使用默认值,然后再通过属性面板进行 修改。 另外,关于宽的设定,一般来说,大表格往 往采用绝对尺寸,表格中所套的表格采用相 对尺寸,这样定位出来的网页才不会随着显 示器分辨率的差异而引起混乱。
7.3 实战演练
本章主要讲述了表格的基本操作,从创 建表格、编辑表格、创建嵌套表格等各 个方面进行了详细的阐述。下面就通过 两个例子讲述表格在整个网页排版布局 方面的综合运用。
第八章 利用表格布局网页
2010.4.3
表格是网页中用途非常广泛的工具,除 了排列数据和图像外,在实际制作过程 中,表格更多的用在网面定位上,只需 通过表格宽度、高度、彼此之间的比例 大小等,就可以把不同的网页元素分别 框在不同的单元格之中以达到页面平衡。
对于网页的排版布局来说,表格是不可缺少的 工具,作为一名网页设计人员,表格运用的熟 练与否直接影响到网页外观的好坏。 本章着重介绍表格的基本功能及其操作,从创 建表格、编辑表格、修改表格等各个方向作了 详细的阐述,最后通过两个实例介绍了表格在 版面布局方面的应用。
从表格的组成来看,它与文本处理软件 中的表格没有什么不同,实际上网页中 的表格与文本处理软件中的表格并不一 样。 利用表格可以排列数据,如例所示的域 名价格表就是使用了表格的效果。
插入表格的具体步骤如下:
1》打开文件夹8下面的index网页 2》将光标置于要插入表格的位置,选择 “插入》表格”命令,弹出“表格”对话框
7.3.1 利用表格布局主页 7.3.2 利用表格布局二级页面
7.2.2 设置表格属性
当选取整个表格后属性面板会显示表格 的属性,设置“背景颜色”为“#cccccc”, “填充”、“间距”都设置为1,“边框” 设置为0,“边框颜色”设置为 “#999999”,设置第1行第1列的“背景 颜色”为“#990000”
表格属性面板中各个选项如下:
对齐:设置表格的对齐方式 背景颜色:设置表格的背景颜色 背景图像:设置表格的背景图像 边框颜色:设置表格的边框颜色 填充:单元格内容和单元格边界之间的像素 数。 间距:相邻的表格单元格间的像素娄
3》在“行数”文本框中输入6,“列数” 文本框中输入3,“表格宽度”文本框中 输入95%,“边框粗细”文本框中输入0, “单元格边距”文本框中输入0,“单元 格间距”文本框中输入0,设置完毕后, 单击“确定”按钮,此时页面上会出现 一个6行3列的表格。
提示:
还可以通过以下方法向见面中插入表格: (1)单击“常用”插入栏的表格图标,从 弹出的对话框中设置表格 (2)拖曳“常用”插入栏的表格图标至所 需要的位置,在弹出的对话框中设置表格
7.1.2 在表格中输入数据
表格建立以后,就可以向表格中添加各 种元素了,如文本、图像等。在表格中 添加文本就同在文档中操作一样,除了 直接输入文本,还可以先利用其他文本 编辑器编辑文本,然后将文本拷贝到表 格中,这也是在文档中添加文本的一种 简捷而快速的方法
在单元格中插入图像时,如果单元格的 尺寸小于插入图像的尺寸,则插入图像 后单元格的尺寸会自动增高或者增宽。 操作
表格对话框主要有以下选项:
行数:在该文本框中输入新表格的行数 列数:在该文本框中输入新表格的列数 表格宽度:用于设置表格的宽度,其中右边 的下拉列表中包含百分比和像素两个选项。 边框粗细:用于设置表格边框的高度,如果 设置为0,在浏览时看不到表格的边框
单元格边距:单元格内容与单元格之间的像 素数 单元格间距:单元格之间的像素数。 页眉:可以定义表头样式,4个样式可以任 意选取一种。 标题 :用来定义表格标题的对齐方式。 摘要:用来对表格进行注释。
7.2 编辑表格
插入表格以后就可以通过选择、拷贝、 增加、删除行,以及合、拆分单元格等 一系列操作实现对表格的编辑操作。
7.2.1 选择表格对象
要想对表格进行编辑,那么首先选择它,主要 有以下四种方法选取整个表格:
搬运鼠标从表格内的左上角至右下角,将所有的单 元格选择中,选择菜单“编辑》全选”命令。 单击表格线任意位置 将光标置于表格内任意位置,选择“修改》表格》 选择表格”命令 将光标置于表格内任意位置,单击文档窗口中左下 角的<table>标签。
7.2.3 添加行和列
在已创建的表格中添加行、列,要先将 光标置于欲插入行、列的单元格内,然 后通过如下方式添加行 选择“修改》表格》插入行”命令,则 在光标所在的单元格上增加了一行 选择“修改》表格》插入列”命令,则 在光标所在的单元格械侧增加了一列
7.2.4 删除行或列
将光标置于要删除行中的任意一个单元格,选 择“修改》表格》删除行”命来自百度文库就可以删除当 前行。 将光标置于要删除列的任意一个单元格,选择 “修改》表格》删除列”命令可以删除当前列。 提示:
还可以单击鼠标右键,在弹出的下拉菜单中添加行 和列,删除行或列。
7.2.5 拆分与合并单元格
拆分单元格是针对于一个单元格而言的。
如果要拆分单元格,选择“修改》表格》拆 分单元格”命令,弹出“拆分单元格”对话 框 在“拆分单元格”对话框中,如果把“单元 格拆分 ”选择“行”,下边将出现“行 数”,然后在文本框中输入要拆分的行数。 反之亦然。 如果要合并单元格需先选中要合并的单元格, 然后选择“修改》表格》合并单元格”命令
提示
也可单击单元格属性面板中的“合并单元格” 按钮进行合并单元格,“拆分单元格”按钮 进行拆分单元格。 合并与拆分表格命令非常有用,它往往是创 建复杂表格最重要的步骤。
7.2.6 创建表格嵌套网页
说得简单点,表格的嵌套就是表格里再 放表格,当遇到怎么拆分和合并都无法 把表格做成想要的样子时,可以考虑表 格嵌套,在一个单元格里再插入一个表 格,再进行拆分和合并。 可以像对任何其他表格一样对嵌套表格 进行格式设置,但是,其宽度受它所在 单元格的宽度的限制
7.1 利用表格制作价格表
无论在日常生活和工作中,还是在网页 设计中,使用表格都可以清晰地显示列 表数据,可以将各种数据排成行和列, 从而更容易查找和使用信息。
7.1.1 插入表格
在插入表格前,先来熟悉一下表格的概 念。表格主要有三个基本组成部分:
行:表格中的水平间隔 列:表格中的垂直间隔 单元格:表格中一行与一列相交所产生的区 域。
提示:
创建表格时,如果开始不能确定它的属性, 可以使用默认值,然后再通过属性面板进行 修改。 另外,关于宽的设定,一般来说,大表格往 往采用绝对尺寸,表格中所套的表格采用相 对尺寸,这样定位出来的网页才不会随着显 示器分辨率的差异而引起混乱。
7.3 实战演练
本章主要讲述了表格的基本操作,从创 建表格、编辑表格、创建嵌套表格等各 个方面进行了详细的阐述。下面就通过 两个例子讲述表格在整个网页排版布局 方面的综合运用。
第八章 利用表格布局网页
2010.4.3
表格是网页中用途非常广泛的工具,除 了排列数据和图像外,在实际制作过程 中,表格更多的用在网面定位上,只需 通过表格宽度、高度、彼此之间的比例 大小等,就可以把不同的网页元素分别 框在不同的单元格之中以达到页面平衡。
对于网页的排版布局来说,表格是不可缺少的 工具,作为一名网页设计人员,表格运用的熟 练与否直接影响到网页外观的好坏。 本章着重介绍表格的基本功能及其操作,从创 建表格、编辑表格、修改表格等各个方向作了 详细的阐述,最后通过两个实例介绍了表格在 版面布局方面的应用。
从表格的组成来看,它与文本处理软件 中的表格没有什么不同,实际上网页中 的表格与文本处理软件中的表格并不一 样。 利用表格可以排列数据,如例所示的域 名价格表就是使用了表格的效果。
插入表格的具体步骤如下:
1》打开文件夹8下面的index网页 2》将光标置于要插入表格的位置,选择 “插入》表格”命令,弹出“表格”对话框
7.3.1 利用表格布局主页 7.3.2 利用表格布局二级页面
7.2.2 设置表格属性
当选取整个表格后属性面板会显示表格 的属性,设置“背景颜色”为“#cccccc”, “填充”、“间距”都设置为1,“边框” 设置为0,“边框颜色”设置为 “#999999”,设置第1行第1列的“背景 颜色”为“#990000”
表格属性面板中各个选项如下:
对齐:设置表格的对齐方式 背景颜色:设置表格的背景颜色 背景图像:设置表格的背景图像 边框颜色:设置表格的边框颜色 填充:单元格内容和单元格边界之间的像素 数。 间距:相邻的表格单元格间的像素娄
3》在“行数”文本框中输入6,“列数” 文本框中输入3,“表格宽度”文本框中 输入95%,“边框粗细”文本框中输入0, “单元格边距”文本框中输入0,“单元 格间距”文本框中输入0,设置完毕后, 单击“确定”按钮,此时页面上会出现 一个6行3列的表格。
提示:
还可以通过以下方法向见面中插入表格: (1)单击“常用”插入栏的表格图标,从 弹出的对话框中设置表格 (2)拖曳“常用”插入栏的表格图标至所 需要的位置,在弹出的对话框中设置表格
7.1.2 在表格中输入数据
表格建立以后,就可以向表格中添加各 种元素了,如文本、图像等。在表格中 添加文本就同在文档中操作一样,除了 直接输入文本,还可以先利用其他文本 编辑器编辑文本,然后将文本拷贝到表 格中,这也是在文档中添加文本的一种 简捷而快速的方法
在单元格中插入图像时,如果单元格的 尺寸小于插入图像的尺寸,则插入图像 后单元格的尺寸会自动增高或者增宽。 操作
表格对话框主要有以下选项:
行数:在该文本框中输入新表格的行数 列数:在该文本框中输入新表格的列数 表格宽度:用于设置表格的宽度,其中右边 的下拉列表中包含百分比和像素两个选项。 边框粗细:用于设置表格边框的高度,如果 设置为0,在浏览时看不到表格的边框
单元格边距:单元格内容与单元格之间的像 素数 单元格间距:单元格之间的像素数。 页眉:可以定义表头样式,4个样式可以任 意选取一种。 标题 :用来定义表格标题的对齐方式。 摘要:用来对表格进行注释。