教你如何制作网页表格

《教你如何制作网页表格》由会员分享，可在线阅读，更多相关《教你如何制作网页表格（85页珍藏版）》请在金锄头文库上搜索。

1、1,第7章 表 格,7.1 创建表格 7.2 编辑表格 7.3 表格的格式化 7.4 利用表格布局版面 思考与练习,2,7.1 创建表格,7.1.1 表格的基本概念 在网页中，表格的结构如图7.1所示。 表格由一些线条分开的小格组成。线条即是表格的边框，被边框分割开来的区域称之为单元格，数据、文字、图形、图片等对象均可根据需要放在相应的单元格中。位于水平方向上的一系列单元格称作一行，位于垂直方向上的一系列单元格称作一列。 在单元格中，可以输入文字和其他对象，这些文字或对象同单元格边缘之间的距离称作单元格内部边距（cell padding）。单元格之间的距离称作单元格间距（cell spacin

2、g）。,3,图7.1,4,7.1.2 插入表格 【例7.1】插入表格 将插入点放置到文档中要插入表格的地方。 执行Insert|Table（插入|表格）命令，或单击普通对象面板上的Insert Table按钮（见图7.2）。如果没有预先设置插入点的位置，可以直接从对象面板中将该按钮拖动到文档中需要插入表格的位置，打开如图7.3所示的对话框，提示确定表格的格式。 在Rows （行）文本框中，输入要插入表格的行数。 在Columns（列）文本框中，输入要插入表格的列数。 在Cell Padding文本框中，输入单元格中对象同单元格内部边界之间的距离，单位为像素点。,5,图7.2,6,图7.3,7,

3、在Cell Spacing文本框中，输入单元格之间的距离值，单位为像素点。 在Width文本框中输入表格宽度值，单位可以在右方的下拉列表中选择。Pixel（像素），以绝对的像素值来设置表格宽度；Percent（百分比），设置表格宽度同浏览器窗口宽度的百分比。 在Border（边框）文本框中，输入边框的宽度，单位为像素点，0表示无边框。 设置完毕，单击OK按钮，确定操作。一个表格就会出现在文档中，如图7.4所示。 7.1.3 在表格中添加内容 表格的内容要添加到表格的单元格中。单元格中可以插入任何类型的数据，例如文本、图像、表单甚至表格等。同时也可以按照通常的编辑页面元素的方法，编辑其中的内容。

4、例如，可以编辑其中的文本，也可以设置其中的文本格式。,8,图7.4,9,单击要插入内容的单元格，可以直接插入、编辑文本，也可插入图像、导航条、表单等页面元素，方法同不在表格中的方法完全相同。在一个单元格中输入完毕，按Tab键，可以将插入点移动到下一个单元格中，以便继续输入。如果在当前行的最后一个单元格中按Tab键，则将插入点移动到下一行中的第一个单元格内。按Shift+Tab键可将插入点移动到上一个单元格。在当前行的第一个单元格中按Shift+Tab键，则将插入移到上一行中的最后一个单元格内。当然，也可直接用鼠标单击需要输入文本的单元格，直接将插入点转移到该单元格中。图7.5是在表格中插入的文

5、本和图像。,10,图7.5,11,7.1.4 利用文本文件创建表格 如果已有一些数据在Microsoft Excel 的工作表中，或在Microsoft Access 的数据库中，或在其他形式的文件系统中，如果在HTML文件中重新输入这些数据，就会显得非常麻烦，如果数据量很大，也就不大现实。 在Dreamweaver中，允许导入其他类型文档中的数据，从而避免了再次输入数据的麻烦。 1. 生成分隔符类型的文本数据文件 在Dreamweaver中，如果要导入表格数据，必须首先将数据存储为以某种分隔符作数据间隔的纯文本文件，图7.6、图7.7所示分别是以Tab和逗号作分隔符的数据文件格式。这种格式文

6、件可以使用相应软件的存储工具生成，如Microsoft Excel 中的“文件|另存为”命令等，也可以手工编辑。,12,图7.6,13,图7.7,14,注意： 文件中的一行相当于表格的一行，一行中的各列数据间用Tab空格或逗号隔开，在这样的文件中，数据不像表格中的数据排得那样整齐。 2. 从格式化文本数据文件中导入表格数据 【例7.2】利用格式化文本创建表格 执行File|Import（文件|导入）命令，再选择Import Table Data （导入表格数据）；或执行Insert|Tabular Data（插入|表格数据）；也可以直接单击对象面板上的Insert Tabular Data（插

7、入表格数据）按钮(图7.8)。打开Insert Tabular Data（插入表格数据）对话框（图7.9），提示选择数据文件及格式。,15,图7.8,16,图7.9,17, 在Data File（数据文件）文本框中，输入含有分隔符的数据文件的路径和名称，也可以单击Browse（浏览）按钮，从磁盘上选择数据文件。 在Delimiter（分隔符）下拉列表中，选择文本数据文件中所采用的分隔符。例如，如果数据文件采用制表符作为分隔符，则应该选择Tab（制表符）；如果数据文件中使用逗号作为分隔符，则可以选择Comma（逗号）。其中分隔符种类有以下几种： Tab（制表符）、Comma（逗号）、Semico

8、lon（分号）、Colon（冒号）、Other（其他）。 如果在Delimiter（分隔符）下拉列表中没有合适的分隔符号，则可以选择Other，然后在右方的文本框中手工输入需要的分隔符。,18,在Table Width（表格宽度）区域进行表格宽度的设置。选择Fit To Data （配合数据）单选按钮，则创建的表格中，每个表格列的宽度根据数据的长度而定，使之刚好能够容纳最长的数据。选择Set（设置）单选按钮，则可以自行指定表格的列宽，在右方的文本框中输入列宽数值，在下拉列表中选择宽度单位。 在Cell Padding（单元格内边空）文本框中，输入单元格中对象同单元格内部边界之间的距离。 在Ce

9、ll Spacing （单元格间距）文本框中，输入单元格之间的距离。 在Format Top Row（格式化顶行）下拉列表中，可以设置表格顶行的文字格式。这可以使表格列所表述的主题更加清晰，相当于将表头突出显示。其中的选择有：No Formatting （不格式化）、Bold（加粗）、Italic（倾斜）、Bold Italic（加粗倾斜）。 在Border文本框中，可以输入表格边框的宽度。,19, 设置完毕，单击OK按钮，确定操作。这时数据源文件中的数据就被导入到文档中，同时创建了相应的表格。图7.10就是导入图7.6的数据生成的表格。 3. 导出表格数据 执行File|Export|Exp

10、ort Table（文件|导出|导出表格）命令可以将网页中的表格数据导出到文本文件中，供其他软件使用。参数设置与导入表格类似。,20,图7.10,21,7.2 编辑表格,7.2.1 选中表格元素 1. 选中整张表格要选中整张表格，有6种方法： 将鼠标移动到表格的左上角位置，或是表格上边框或下边框外附近的任意位置，当鼠标光标呈现一个交叉十字的形状时单击鼠标，即可选中表格，如图7.11所示。 将鼠标移动到表格左方边框之外的区域，当鼠标指针变为指向右上方的箭头 形状时，单击鼠标，即可选中整张表格。 单击表格中任意位置，然后执行Modify|Table|Select Table（修改|表格|选择表格）

11、命令，这时整张表格被选中。,22,图7.11,23, 单击表格中任意位置，执行Edit|Select All（编辑|全选）命令，或是按Ctrl+A键。 单击表格中的任意位置，然后在文档窗口左下方状态行上标记选择器中单击标记。 按住Shift键，然后单击表格中的任意位置。 当表格被选中时，其周围出现一个边框，表明被选中，同时在边框的右方和下方带有黑色控制柄。通过拖动这些黑色控点，可以改变表格的大小。 2. 选择表格行 要选中表格行，可以使用以下几种方法。 将鼠标移动到要选中表格行左方表格之外的位置，当鼠标指针变为一个指向右方的黑色箭头形状时单击鼠标，即可选中相应的表格行，如图7.12所示。这时按

12、下鼠标上下拖动，可以选中多行。,24,图7.11,25,图7.12,26, 单击要选择的表格行中的第一个单元格，然后按住鼠标左键，拖动鼠标，直到要选择的表格行中最后一个单元格中，释放鼠标，即可选中表格行。同样，拖动鼠标，移过多个表格行，即可选中多个表格行。 单击要选择的表格行中任意一个单元格，然后在文档窗口左下方状态行上单击标记，即可选中该表格行，当表格行被选中时，该行中所有的单元格四周都带有黑色粗框。 3. 选择表格列 要选中表格列，有如下方法： 将鼠标移动到要选中表格列上方表格之外的位置，当鼠标光标指针变为一个指向下方的黑色箭头形状时单击鼠标，即可选中相应的表格列；这时按下鼠标左右拖动，可

13、以选中多列，如图7.13所示。,27,图7.13,28, 单击要选择表格列中的第一个单元格，然后按住鼠标左键，拖动鼠标，直到要选择表格列中最后一个单元格中，再释放鼠标，即可选中表格列。同样，拖动鼠标，移过多个表格列，即可选中多个表格列。 4. 选中单元格 在Dreamweaver中，可以选中相邻的单元格，也可以选中不相邻的单元格。 选择一个单元格。在要选择的单元格中单击鼠标，然后拖动到相邻单元格（左、右、上、下以及斜线方向皆可）中部，当要选中单元格四周带有粗框时释放鼠标。 另一种方法是在要选中的单元格中单击鼠标，然后在文档窗口左下方状态行上的标记选择器中，单击或标记。被选中的单元格四周会出现粗

14、框。,29, 选中相邻多个单元格。在相邻单元格中的第一个单元格中按下鼠标，拖动鼠标（可以横向、纵向、斜线拖动），移动到最后一个单元格中，即可选中一组相邻单元格。 选中不相邻的多个单元格。按住Ctrl键，单击要选中的单元格，则被单击的单元格就会被选中。 5. 取消选中状态 选中表格元素后，如果希望取消选择状态，只要单击任何单元格，就会取消对表格元素的选中状态。也可以通过单击表格之外的其他任意位置来取消对表格元素的选择。,30,7.2.2 插入行或列 最初插入表格的行数或列数不够时，可以插入行或列，这些操作都可以在Modify|Table菜单中实现（见图7.14）。 1. 插入一行 执行Modif

15、y|Table|Insert Row（修改|表格|插入行）命令，或按Ctrl+M键，就会在原先单元格的上方，插入一个新空白行。 2. 插入一列 执行Modify|Table|Insert Column（修改|表格|插入列）命令，在原单元格的左方插入一列。 3. 插入多行或多列 执行Modify|Table|Insert Rows or Columns（插入行或列）命令,打开Insert Rows or Columns（插入行或列）对话框（图7.15），提示输入要添加的行数、列数和位置。,31,图7.14,32,图7.15,33, 要插入行，可以选择Rows；要插入列，可以选择Columns。

16、如果插入行，则在Number of Rows（行数）数值框中输入要添加的行数；如果插入列，则在Number of Columns（列数）数值框中输入要添加的列数。 在Where（哪里）区域，设置新插入行或列的位置。对于插入行，可以选择Above the Selection（选中项之上）或Below the Selection（选中项之下）；对于插入列，可以选择Before current Column（当前列之前）或After current Column（当前列之后）。 提示： 要在表格的最下边或右边增加行或列，可以使用表格属性面操作。 选中整个表格； 在表格属性面板（图7.16）的Rows或Cols文本框中，输入需要的整个表格的行数或列数，即可实现对表格行和列的增删操作。,34,图7.16,35,7.2.3 删除行或列 对于多余的行或列，可以从表格中删除。 1. 删除行 选中要删除的行，然后执行Modify|Table|Delete Row（删除行）命令，或是按下Del键，或执行Edit|C