教你如何制作网页表格26739.pptx
《教你如何制作网页表格26739.pptx》由会员分享,可在线阅读,更多相关《教你如何制作网页表格26739.pptx(85页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第7章 表 格7.1 创建表格创建表格7.2 编辑表格编辑表格7.3 表格的格式化表格的格式化7.4 利用表格布局版面利用表格布局版面思考与练习思考与练习1 17.1 创建表格7.1.1 7.1.1 表格的基本概念表格的基本概念表格的基本概念表格的基本概念在网页中,表格的结构如图在网页中,表格的结构如图在网页中,表格的结构如图在网页中,表格的结构如图7.17.1所示。所示。所示。所示。表格由一些线条分开的小格组成。线条即是表格的边表格由一些线条分开的小格组成。线条即是表格的边表格由一些线条分开的小格组成。线条即是表格的边表格由一些线条分开的小格组成。线条即是表格的边框,被边框分割开来的区域称之
2、为单元格,数据、框,被边框分割开来的区域称之为单元格,数据、框,被边框分割开来的区域称之为单元格,数据、框,被边框分割开来的区域称之为单元格,数据、文字、图形、图片等对象均可根据需要放在相应的文字、图形、图片等对象均可根据需要放在相应的文字、图形、图片等对象均可根据需要放在相应的文字、图形、图片等对象均可根据需要放在相应的单元格中。位于水平方向上的一系列单元格称作一单元格中。位于水平方向上的一系列单元格称作一单元格中。位于水平方向上的一系列单元格称作一单元格中。位于水平方向上的一系列单元格称作一行,位于垂直方向上的一系列单元格称作一列。行,位于垂直方向上的一系列单元格称作一列。行,位于垂直方向
3、上的一系列单元格称作一列。行,位于垂直方向上的一系列单元格称作一列。在单元格中,可以输入文字和其他对象,这些文字或在单元格中,可以输入文字和其他对象,这些文字或在单元格中,可以输入文字和其他对象,这些文字或在单元格中,可以输入文字和其他对象,这些文字或对象同单元格边缘之间的距离称作单元格内部边距对象同单元格边缘之间的距离称作单元格内部边距对象同单元格边缘之间的距离称作单元格内部边距对象同单元格边缘之间的距离称作单元格内部边距(cell paddingcell padding)。)。)。)。单元格之间的距离称作单元格单元格之间的距离称作单元格单元格之间的距离称作单元格单元格之间的距离称作单元格间
4、距(间距(间距(间距(cell spacingcell spacing)。)。)。)。2 2图图7.13 37.1.2 7.1.2 插入表格插入表格插入表格插入表格【例【例【例【例7.17.1】插入表格】插入表格】插入表格】插入表格 将插入点放置到文档中要插入表格的地方。将插入点放置到文档中要插入表格的地方。将插入点放置到文档中要插入表格的地方。将插入点放置到文档中要插入表格的地方。执行执行执行执行Insert|TableInsert|Table(插入插入插入插入|表格)命令,或单击普通表格)命令,或单击普通表格)命令,或单击普通表格)命令,或单击普通对象面板上的对象面板上的对象面板上的对象面
5、板上的Insert TableInsert Table按钮(见图按钮(见图按钮(见图按钮(见图7.27.2)。如果没)。如果没)。如果没)。如果没有预先设置插入点的位置,可以直接从对象面板中有预先设置插入点的位置,可以直接从对象面板中有预先设置插入点的位置,可以直接从对象面板中有预先设置插入点的位置,可以直接从对象面板中将该按钮拖动到文档中需要插入表格的位置,打开将该按钮拖动到文档中需要插入表格的位置,打开将该按钮拖动到文档中需要插入表格的位置,打开将该按钮拖动到文档中需要插入表格的位置,打开如图如图如图如图7.37.3所示的对话框,提示确定表格的格式。所示的对话框,提示确定表格的格式。所示的
6、对话框,提示确定表格的格式。所示的对话框,提示确定表格的格式。在在在在Rows Rows(行)文本框中,输入要插入表格的行数。行)文本框中,输入要插入表格的行数。行)文本框中,输入要插入表格的行数。行)文本框中,输入要插入表格的行数。在在在在ColumnsColumns(列)文本框中,输入要插入表格的列数。列)文本框中,输入要插入表格的列数。列)文本框中,输入要插入表格的列数。列)文本框中,输入要插入表格的列数。在在在在Cell PaddingCell Padding文本框中,输入单元格中对象同单元文本框中,输入单元格中对象同单元文本框中,输入单元格中对象同单元文本框中,输入单元格中对象同单元
7、格内部边界之间的距离,单位为像素点。格内部边界之间的距离,单位为像素点。格内部边界之间的距离,单位为像素点。格内部边界之间的距离,单位为像素点。4 4图图7.25 5图图7.36 6在在在在Cell SpacingCell Spacing文本框中,输入单元格之间的距离值,单文本框中,输入单元格之间的距离值,单文本框中,输入单元格之间的距离值,单文本框中,输入单元格之间的距离值,单位为像素点。位为像素点。位为像素点。位为像素点。在在在在WidthWidth文本框中输入表格宽度值,单位可以在右方的下文本框中输入表格宽度值,单位可以在右方的下文本框中输入表格宽度值,单位可以在右方的下文本框中输入表格
8、宽度值,单位可以在右方的下拉列表中选择。拉列表中选择。拉列表中选择。拉列表中选择。PixelPixel(像素),以绝对的像素值来设置像素),以绝对的像素值来设置像素),以绝对的像素值来设置像素),以绝对的像素值来设置表格宽度;表格宽度;表格宽度;表格宽度;PercentPercent(百分比),设置表格宽度同浏览器百分比),设置表格宽度同浏览器百分比),设置表格宽度同浏览器百分比),设置表格宽度同浏览器窗口宽度的百分比。窗口宽度的百分比。窗口宽度的百分比。窗口宽度的百分比。在在在在BorderBorder(边框)文本框中,输入边框的宽度,单位为像边框)文本框中,输入边框的宽度,单位为像边框)文
9、本框中,输入边框的宽度,单位为像边框)文本框中,输入边框的宽度,单位为像素点,素点,素点,素点,0 0表示无边框。表示无边框。表示无边框。表示无边框。设置完毕,单击设置完毕,单击设置完毕,单击设置完毕,单击OKOK按钮,确定操作。一个表格就会出按钮,确定操作。一个表格就会出按钮,确定操作。一个表格就会出按钮,确定操作。一个表格就会出现在文档中,如图现在文档中,如图现在文档中,如图现在文档中,如图7.47.4所示。所示。所示。所示。7.1.3 7.1.3 在表格中添加内容在表格中添加内容在表格中添加内容在表格中添加内容表格的内容要添加到表格的单元格中。单元格中可以插入表格的内容要添加到表格的单元
10、格中。单元格中可以插入表格的内容要添加到表格的单元格中。单元格中可以插入表格的内容要添加到表格的单元格中。单元格中可以插入任何类型的数据,例如文本、图像、表单甚至表格等。任何类型的数据,例如文本、图像、表单甚至表格等。任何类型的数据,例如文本、图像、表单甚至表格等。任何类型的数据,例如文本、图像、表单甚至表格等。同时也可以按照通常的编辑页面元素的方法,编辑其中同时也可以按照通常的编辑页面元素的方法,编辑其中同时也可以按照通常的编辑页面元素的方法,编辑其中同时也可以按照通常的编辑页面元素的方法,编辑其中的内容。例如,可以编辑其中的文本,也可以设置其中的内容。例如,可以编辑其中的文本,也可以设置其
11、中的内容。例如,可以编辑其中的文本,也可以设置其中的内容。例如,可以编辑其中的文本,也可以设置其中的文本格式。的文本格式。的文本格式。的文本格式。7 7图图7.48 8单击要插入内容的单元格,可以直接插入、编辑文本,单击要插入内容的单元格,可以直接插入、编辑文本,单击要插入内容的单元格,可以直接插入、编辑文本,单击要插入内容的单元格,可以直接插入、编辑文本,也可插入图像、导航条、表单等页面元素,方法同也可插入图像、导航条、表单等页面元素,方法同也可插入图像、导航条、表单等页面元素,方法同也可插入图像、导航条、表单等页面元素,方法同不在表格中的方法完全相同。在一个单元格中输入不在表格中的方法完全
12、相同。在一个单元格中输入不在表格中的方法完全相同。在一个单元格中输入不在表格中的方法完全相同。在一个单元格中输入完毕,按完毕,按完毕,按完毕,按TabTab键,可以将插入点移动到下一个单元格键,可以将插入点移动到下一个单元格键,可以将插入点移动到下一个单元格键,可以将插入点移动到下一个单元格中,以便继续输入。如果在当前行的最后一个单元中,以便继续输入。如果在当前行的最后一个单元中,以便继续输入。如果在当前行的最后一个单元中,以便继续输入。如果在当前行的最后一个单元格中按格中按格中按格中按TabTab键,则将插入点移动到下一行中的第一个键,则将插入点移动到下一行中的第一个键,则将插入点移动到下一
13、行中的第一个键,则将插入点移动到下一行中的第一个单元格内。按单元格内。按单元格内。按单元格内。按Shift+TabShift+Tab键可将插入点移动到上一个键可将插入点移动到上一个键可将插入点移动到上一个键可将插入点移动到上一个单元格。在当前行的第一个单元格中按单元格。在当前行的第一个单元格中按单元格。在当前行的第一个单元格中按单元格。在当前行的第一个单元格中按Shift+TabShift+Tab键,键,键,键,则将插入移到上一行中的最后一个单元格内。当然,则将插入移到上一行中的最后一个单元格内。当然,则将插入移到上一行中的最后一个单元格内。当然,则将插入移到上一行中的最后一个单元格内。当然,
14、也可直接用鼠标单击需要输入文本的单元格,直接也可直接用鼠标单击需要输入文本的单元格,直接也可直接用鼠标单击需要输入文本的单元格,直接也可直接用鼠标单击需要输入文本的单元格,直接将插入点转移到该单元格中。图将插入点转移到该单元格中。图将插入点转移到该单元格中。图将插入点转移到该单元格中。图7.57.5是在表格中插入是在表格中插入是在表格中插入是在表格中插入的文本和图像。的文本和图像。的文本和图像。的文本和图像。9 9图图7.510107.1.4 7.1.4 利用文本文件创建表格利用文本文件创建表格利用文本文件创建表格利用文本文件创建表格如果已有一些数据在如果已有一些数据在如果已有一些数据在如果已
15、有一些数据在Microsoft Excel Microsoft Excel 的工作表中,或的工作表中,或的工作表中,或的工作表中,或在在在在Microsoft Access Microsoft Access 的数据库中,或在其他形式的的数据库中,或在其他形式的的数据库中,或在其他形式的的数据库中,或在其他形式的文件系统中,如果在文件系统中,如果在文件系统中,如果在文件系统中,如果在HTMLHTML文件中重新输入这些数据,文件中重新输入这些数据,文件中重新输入这些数据,文件中重新输入这些数据,就会显得非常麻烦,如果数据量很大,也就不大现就会显得非常麻烦,如果数据量很大,也就不大现就会显得非常麻烦
16、,如果数据量很大,也就不大现就会显得非常麻烦,如果数据量很大,也就不大现实。实。实。实。在在在在DreamweaverDreamweaver中,允许导入其他类型文档中的数据,中,允许导入其他类型文档中的数据,中,允许导入其他类型文档中的数据,中,允许导入其他类型文档中的数据,从而避免了再次输入数据的麻烦。从而避免了再次输入数据的麻烦。从而避免了再次输入数据的麻烦。从而避免了再次输入数据的麻烦。1.1.生成分隔符类型的文本数据文件生成分隔符类型的文本数据文件生成分隔符类型的文本数据文件生成分隔符类型的文本数据文件在在在在DreamweaverDreamweaver中,如果要导入表格数据,必须首先
17、中,如果要导入表格数据,必须首先中,如果要导入表格数据,必须首先中,如果要导入表格数据,必须首先将数据存储为以某种分隔符作数据间隔的纯文本文将数据存储为以某种分隔符作数据间隔的纯文本文将数据存储为以某种分隔符作数据间隔的纯文本文将数据存储为以某种分隔符作数据间隔的纯文本文件,图件,图件,图件,图7.67.6、图、图、图、图7.77.7所示分别是以所示分别是以所示分别是以所示分别是以TabTab和逗号作分隔符和逗号作分隔符和逗号作分隔符和逗号作分隔符的数据文件格式。这种格式文件可以使用相应软件的数据文件格式。这种格式文件可以使用相应软件的数据文件格式。这种格式文件可以使用相应软件的数据文件格式。
18、这种格式文件可以使用相应软件的存储工具生成,如的存储工具生成,如的存储工具生成,如的存储工具生成,如Microsoft Excel Microsoft Excel 中的中的中的中的“文件文件文件文件|另另另另存为存为存为存为”命令等,也可以手工编辑。命令等,也可以手工编辑。命令等,也可以手工编辑。命令等,也可以手工编辑。1111图图7.61212图图7.71313注意:注意:注意:注意:文件中的一行相当于表格的一行,一行中的各文件中的一行相当于表格的一行,一行中的各文件中的一行相当于表格的一行,一行中的各文件中的一行相当于表格的一行,一行中的各列数据间用列数据间用列数据间用列数据间用TabTa
19、b空格或逗号隔开,在这样的文件中,空格或逗号隔开,在这样的文件中,空格或逗号隔开,在这样的文件中,空格或逗号隔开,在这样的文件中,数据不像表格中的数据排得那样整齐。数据不像表格中的数据排得那样整齐。数据不像表格中的数据排得那样整齐。数据不像表格中的数据排得那样整齐。2.2.从格式化文本数据文件中导入表格数据从格式化文本数据文件中导入表格数据从格式化文本数据文件中导入表格数据从格式化文本数据文件中导入表格数据【例【例【例【例7.27.2】利用格式化文本创建表格】利用格式化文本创建表格】利用格式化文本创建表格】利用格式化文本创建表格 执行执行执行执行File|ImportFile|Import(文
20、件文件文件文件|导入)命令,再选择导入)命令,再选择导入)命令,再选择导入)命令,再选择Import Import Table Data Table Data(导入表格数据);或执行导入表格数据);或执行导入表格数据);或执行导入表格数据);或执行Insert|Tabular DataInsert|Tabular Data(插入插入插入插入|表格数据);也可以直表格数据);也可以直表格数据);也可以直表格数据);也可以直接单击对象面板上的接单击对象面板上的接单击对象面板上的接单击对象面板上的Insert Tabular DataInsert Tabular Data(插入表插入表插入表插入表格
21、数据)按钮格数据)按钮格数据)按钮格数据)按钮(图图图图7.8)7.8)。打开。打开。打开。打开Insert Tabular DataInsert Tabular Data(插入表格数据)对话框(图插入表格数据)对话框(图插入表格数据)对话框(图插入表格数据)对话框(图7.97.9),提示选择数据),提示选择数据),提示选择数据),提示选择数据文件及格式。文件及格式。文件及格式。文件及格式。1414图图7.81515图图7.91616 在在在在Data FileData File(数据文件)文本框中,输入含有分隔数据文件)文本框中,输入含有分隔数据文件)文本框中,输入含有分隔数据文件)文本框中
22、,输入含有分隔符的数据文件的路径和名称,也可以单击符的数据文件的路径和名称,也可以单击符的数据文件的路径和名称,也可以单击符的数据文件的路径和名称,也可以单击BrowseBrowse(浏览)按钮,从磁盘上选择数据文件。浏览)按钮,从磁盘上选择数据文件。浏览)按钮,从磁盘上选择数据文件。浏览)按钮,从磁盘上选择数据文件。在在在在DelimiterDelimiter(分隔符)下拉列表中,选择文本数据分隔符)下拉列表中,选择文本数据分隔符)下拉列表中,选择文本数据分隔符)下拉列表中,选择文本数据文件中所采用的分隔符。例如,如果数据文件采用文件中所采用的分隔符。例如,如果数据文件采用文件中所采用的分隔
23、符。例如,如果数据文件采用文件中所采用的分隔符。例如,如果数据文件采用制表符作为分隔符,则应该选择制表符作为分隔符,则应该选择制表符作为分隔符,则应该选择制表符作为分隔符,则应该选择TabTab(制表符);如制表符);如制表符);如制表符);如果数据文件中使用逗号作为分隔符,则可以选择果数据文件中使用逗号作为分隔符,则可以选择果数据文件中使用逗号作为分隔符,则可以选择果数据文件中使用逗号作为分隔符,则可以选择CommaComma(逗号)。其中分隔符种类有以下几种:逗号)。其中分隔符种类有以下几种:逗号)。其中分隔符种类有以下几种:逗号)。其中分隔符种类有以下几种:TabTab(制表符)、制表符
24、)、制表符)、制表符)、CommaComma(逗号)、逗号)、逗号)、逗号)、SemicolonSemicolon(分号)、分号)、分号)、分号)、ColonColon(冒号)、冒号)、冒号)、冒号)、OtherOther(其他)。其他)。其他)。其他)。如果在如果在如果在如果在DelimiterDelimiter(分隔符)下拉列表中没有合适的分分隔符)下拉列表中没有合适的分分隔符)下拉列表中没有合适的分分隔符)下拉列表中没有合适的分隔符号,则可以选择隔符号,则可以选择隔符号,则可以选择隔符号,则可以选择OtherOther,然后在右方的文本框中然后在右方的文本框中然后在右方的文本框中然后在右
25、方的文本框中手工输入需要的分隔符。手工输入需要的分隔符。手工输入需要的分隔符。手工输入需要的分隔符。1717在在在在Table WidthTable Width(表格宽度)区域进行表格宽度的设置。选择表格宽度)区域进行表格宽度的设置。选择表格宽度)区域进行表格宽度的设置。选择表格宽度)区域进行表格宽度的设置。选择Fit Fit To Data To Data(配合数据)单选按钮,则创建的表格中,每个表配合数据)单选按钮,则创建的表格中,每个表配合数据)单选按钮,则创建的表格中,每个表配合数据)单选按钮,则创建的表格中,每个表格列的宽度根据数据的长度而定,使之刚好能够容纳最长的格列的宽度根据数据
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 制作 网页 表格 26739
限制150内