网页设计table制作

1第7章表格7.1创建表格7.2编辑表格7.3表格的格式化7.4利用表格布局版面思考与练习网页设计table制作全文共85页，当前为第1页。27.1创建表格7.1.1表格的基本概念在网页中，表格的结构如图7.1所示。表格由一些线条分开的小格组成。线条即是表格的边框，被边框分割开来的区域称之为单元格，数据、文字、图形、图片等对象均可根据需要放在相应的单元格中。位于水平方向上的一系列单元格称作一行，位于垂直方向上的一系列单元格称作一列。在单元格中，可以输入文字和其他对象，这些文字或对象同单元格边缘之间的距离称作单元格内部边距（cellpadding）。单元格之间的距离称作单元格间距（cellspacing）。网页设计table制作全文共85页，当前为第2页。3图7.1网页设计table制作全文共85页，当前为第3页。47.1.2插入表格【例7.1】插入表格①将插入点放置到文档中要插入表格的地方。②执行Insert|Table（插入|表格）命令，或单击普通对象面板上的InsertTable按钮（见图7.2）。如果没有预先设置插入点的位置，可以直接从对象面板中将该按钮拖动到文档中需要插入表格的位置，打开如图7.3所示的对话框，提示确定表格的格式。③在Rows（行）文本框中，输入要插入表格的行数。在Columns（列）文本框中，输入要插入表格的列数。在CellPadding文本框中，输入单元格中对象同单元格内部边界之间的距离，单位为像素点。网页设计table制作全文共85页，当前为第4页。5图7.2网页设计table制作全文共85页，当前为第5页。6图7.3网页设计table制作全文共85页，当前为第6页。7在CellSpacing文本框中，输入单元格之间的距离值，单位为像素点。在Width文本框中输入表格宽度值，单位可以在右方的下拉列表中选择。Pixel（像素），以绝对的像素值来设置表格宽度；Percent（百分比），设置表格宽度同浏览器窗口宽度的百分比。在Border（边框）文本框中，输入边框的宽度，单位为像素点，0表示无边框。④设置完毕，单击OK按钮，确定操作。一个表格就会出现在文档中，如图7.4所示。7.1.3在表格中添加内容表格的内容要添加到表格的单元格中。单元格中可以插入任何类型的数据，例如文本、图像、表单甚至表格等。同时也可以按照通常的编辑页面元素的方法，编辑其中的内容。例如，可以编辑其中的文本，也可以设置其中的文本格式。网页设计table制作全文共85页，当前为第7页。8图7.4网页设计table制作全文共85页，当前为第8页。9单击要插入内容的单元格，可以直接插入、编辑文本，也可插入图像、导航条、表单等页面元素，方法同不在表格中的方法完全相同。在一个单元格中输入完毕，按Tab键，可以将插入点移动到下一个单元格中，以便继续输入。如果在当前行的最后一个单元格中按Tab键，则将插入点移动到下一行中的第一个单元格内。按Shift+Tab键可将插入点移动到上一个单元格。在当前行的第一个单元格中按Shift+Tab键，则将插入移到上一行中的最后一个单元格内。当然，也可直接用鼠标单击需要输入文本的单元格，直接将插入点转移到该单元格中。图7.5是在表格中插入的文本和图像。网页设计table制作全文共85页，当前为第9页。10图7.5网页设计table制作全文共85页，当前为第10页。117.1.4利用文本文件创建表格如果已有一些数据在MicrosoftExcel的工作表中，或在MicrosoftAccess的数据库中，或在其他形式的文件系统中，如果在HTML文件中重新输入这些数据，就会显得非常麻烦，如果数据量很大，也就不大现实。在Dreamweaver中，允许导入其他类型文档中的数据，从而避免了再次输入数据的麻烦。1.生成分隔符类型的文本数据文件在Dreamweaver中，如果要导入表格数据，必须首先将数据存储为以某种分隔符作数据间隔的纯文本文件，图7.6、图7.7所示分别是以Tab和逗号作分隔符的数据文件格式。这种格式文件可以使用相应软件的存储工具生成，如MicrosoftExcel中的“文件|另存为”命令等，也可以手工编辑。网页设计table制作全文共85页，当前为第11页。12图7.6网页设计table制作全文共85页，当前为第12页。13图7.7网页设计table制作全文共85页，当前为第13页。14注意：文件中的一行相当于表格的一行，一行中的各列数据间用Tab空格或逗号隔开，在这样的文件中，数据不像表格中的数据排得那样整齐。2.从格式化文本数据文件中导入表格数据【例7.2】利用格式化文本创建表格①执行File|Import（文件|导入）命令，再选择ImportTableData（导入表格数据）；或执行Insert|TabularData（插入|表格数据）；也可以直接单击对象面板上的InsertTabularData（插入表格数据）按钮(图7.8)。打开InsertTabularData（插入表格数据）对话框（图7.9），提示选择数据文件及格式。网页设计table制作全文共85页，当前为第14页。15图7.8网页设计table制作全文共85页，当前为第15页。16图7.9网页设计table制作全文共85页，当前为第16页。17②在DataFile（数据文件）文本框中，输入含有分隔符的数据文件的路径和名称，也可以单击Browse（浏览）按钮，从磁盘上选择数据文件。③在Delimiter（分隔符）下拉列表中，选择文本数据文件中所采用的分隔符。例如，如果数据文件采用制表符作为分隔符，则应该选择Tab（制表符）；如果数据文件中使用逗号作为分隔符，则可以选择Comma（逗号）。其中分隔符种类有以下几种：Tab（制表符）、Comma（逗号）、Semicolon（分号）、Colon（冒号）、Other（其他）。如果在Delimiter（分隔符）下拉列表中没有合适的分隔符号，则可以选择Other，然后在右方的文本框中手工输入需要的分隔符。网页设计table制作全文共85页，当前为第17页。18在TableWidth（表格宽度）区域进行表格宽度的设置。选择FitToData（配合数据）单选按钮，则创建的表格中，每个表格列的宽度根据数据的长度而定，使之刚好能够容纳最长的数据。选择Set（设置）单选按钮，则可以自行指定表格的列宽，在右方的文本框中输入列宽数值，在下拉列表中选择宽度单位。在CellPadding（单元格内边空）文本框中，输入单元格中对象同单元格内部边界之间的距离。在CellSpacing（单元格间距）文本框中，输入单元格之间的距离。在FormatTopRow（格式化顶行）下拉列表中，可以设置表格顶行的文字格式。这可以使表格列所表述的主题更加清晰，相当于将表头突出显示。其中的选择有：NoFormatting（不格式化）、Bold（加粗）、Italic（倾斜）、BoldItalic（加粗倾斜）。在Border文本框中，可以输入表格边框的宽度。网页设计table制作全文共85页，当前为第18页。19④设置完毕，单击OK按钮，确定操作。这时数据源文件中的数据就被导入到文档中，同时创建了相应的表格。图7.10就是导入图7.6的数据生成的表格。3.导出表格数据执行File|Export|ExportTable（文件|导出|导出表格）命令可以将网页中的表格数据导出到文本文件中，供其他软件使用。参数设置与导入表格类似。网页设计table制作全文共85页，当前为第19页。20图7.10网页设计table制作全文共85页，当前为第20页。217.2编辑表格7.2.1选中表格元素1.选中整张表格要选中整张表格，有6种方法：①将鼠标移动到表格的左上角位置，或是表格上边框或下边框外附近的任意位置，当鼠标光标呈现一个交叉十字的形状时单击鼠标，即可选中表格，如图7.11所示。②将鼠标移动到表格左方边框之外的区域，当鼠标指针变为指向右上方的箭头形状时，单击鼠标，即可选中整张表格。③单击表格中任意位置，然后执行Modify|Table|SelectTable（修改|表格|选择表格）命令，这时整张表格被选中。网页设计table制作全文共85页，当前为第21页。22图7.11网页设计table制作全文共85页，当前为第22页。23④单击表格中任意位置，执行Edit|SelectAll（编辑|全选）命令，或是按Ctrl+A键。⑤单击表格中的任意位置，然后在文档窗口左下方状态行上标记选择器中单击<table>标记。⑥按住Shift键，然后单击表格中的任意位置。当表格被选中时，其周围出现一个边框，表明被选中，同时在边框的右方和下方带有黑色控制柄。通过拖动这些黑色控点，可以改变表格的大小。2.选择表格行要选中表格行，可以使用以下几种方法。①将鼠标移动到要选中表格行左方表格之外的位置，当鼠标指针变为一个指向右方的黑色箭头形状时单击鼠标，即可选中相应的表格行，如图7.12所示。这时按下鼠标上下拖动，可以选中多行。网页设计table制作全文共85页，当前为第23页。24图7.11网页设计table制作全文共85页，当前为第24页。25图7.12网页设计table制作全文共85页，当前为第25页。26②单击要选择的表格行中的第一个单元格，然后按住鼠标左键，拖动鼠标，直到要选择的表格行中最后一个单元格中，释放鼠标，即可选中表格行。同样，拖动鼠标，移过多个表格行，即可选中多个表格行。③单击要选择的表格行中任意一个单元格，然后在文档窗口左下方状态行上单击<tr>标记，即可选中该表格行，当表格行被选中时，该行中所有的单元格四周都带有黑色粗框。3.选择表格列要选中表格列，有如下方法：①将鼠标移动到要选中表格列上方表格之外的位置，当鼠标光标指针变为一个指向下方的黑色箭头形状时单击鼠标，即可选中相应的表格列；这时按下鼠标左右拖动，可以选中多列，如图7.13所示。网页设计table制作全文共85页，当前为第26页。27图7.13网页设计table制作全文共85页，当前为第27页。28②单击要选择表格列中的第一个单元格，然后按住鼠标左键，拖动鼠标，直到要选择表格列中最后一个单元格中，再释放鼠标，即可选中表格列。同样，拖动鼠标，移过多个表格列，即可选中多个表格列。4.选中单元格在Dreamweaver中，可以选中相邻的单元格，也可以选中不相邻的单元格。①选择一个单元格。在要选择的单元格中单击鼠标，然后拖动到相邻单元格（左、右、上、下以及斜线方向皆可）中部，当要选中单元格四周带有粗框时释放鼠标。另一种方法是在要选中的单元格中单击鼠标，然后在文档窗口左下方状态行上的标记选择器中，单击<td>或<th>标记。被选中的单元格四周会出现粗框。网页设计table制作全文共85页，当前为第28页。29②选中相邻多个单元格。在相邻单元格中的第一个单元格中按下鼠标，拖动鼠标（可以横向、纵向、斜线拖动），移动到最后一个单元格中，即可选中一组相邻单元格。③选中不相邻的多个单元格。按住Ctrl键，单击要选中的单元格，则被单击的单元格就会被选中。5.取消选中状态选中表格元素后，如果希望取消选择状态，只要单击任何单元格，就会取消对表格元素的选中状态。也可以通过单击表格之外的其他任意位置来取消对表格元素的选择。网页设计table制作全文共85页，当前为第29页。307.2.2插入行或列最初插入表格的行数或列数不够时，可以插入行或列，这些操作都可以在Modify|Table菜单中实现（见图7.14）。1.插入一行执行Modify|Table|InsertRow（修改|表格|插入行）命令，或按Ctrl+M键，就会在原先单元格的上方，插入一个新空白行。2.插入一列执行Modify|Table|InsertColumn（修改|表格|插入列）命令，在原单元格的左方插入一列。3.插入多行或多列①执行Modify|Table|InsertRowsorColumns（插入行或列）命令,打开InsertRowsorColumns（插入行或列）对话框（图7.15），提示输入要添加的行数、列数和位置。网页设计table制作全文共85页，当前为第30页。31图7.14网页设计table制作全文共85页，当前为第31页。32图7.15网页设计table制作全文共85页，当前为第32页。33②要插入行，可以选择Rows；要插入列，可以选择Columns。如果插入行，则在NumberofRows（行数）数值框中输入要添加的行数；如果插入列，则在NumberofColumns（列数）数值框中输入要添加的列数。在Where（哪里）区域，设置新插入行或列的位置。对于插入行，可以选择AbovetheSelection（选中项之上）或BelowtheSelection（选中项之下）；对于插入列，可以选择BeforecurrentColumn（当前列之前）或AftercurrentColumn（当前列之后）。提示：要在表格的最下边或右边增加行或列，可以使用表格属性面操作。选中整个表格；在表格属性面板（图7.16）的Rows或Cols文本框中，输入需要的整个表格的行数或列数，即可实现对表格行和列的增删操作。网页设计table制作全文共85页，当前为第33页。34图7.16网页设计table制作全文共85页，当前为第34页。357.2.3删除行或列对于多余的行或列，可以从表格中删除。1.删除行选中要删除的行，然后执行Modify|Table|DeleteRow（删除行）命令，或是按下Del键，或执行Edit|Cut命令，即可删除该行。2.删除列选中要删除的列，再执行Modify|Table|DeleteColumn（删除列）命令，或按Del键，或执行Edit|Cut命令，即可删除该列。3.删除表格选中要删除的表格，按Del键，或执行Edit|Cut命令，即可删除表格。网页设计table制作全文共85页，当前为第35页。367.2.4合并与拆分单元格合并单元格指将两个或多个相邻单元格合并成一个单元格，拆分单元格指将一个单元格分成多个单元格。设初始表格如图7.10所示。【例7.3】合并单元格①选中要合并的两个或多个单元格（见图7.17）。②执行Modify|Table|MergeCells（合并单元格）命令，或单击属性面板MergeSelectedCellsUsingSpans(使用跨度合并选中单元格)按钮（见图7.18），图7.19是合并后的效果。网页设计table制作全文共85页，当前为第36页。37图7.17网页设计table制作全文共85页，当前为第37页。38图7.18网页设计table制作全文共85页，当前为第38页。39图7.19网页设计table制作全文共85页，当前为第39页。40【例7.4】拆分单元格①选中要拆分的一个单元格（图7.20），或将插入点放入要拆分的单元格中。②执行Modify|Table|SplitCells（拆分单元格）命令，或单击属性面板SplitsCellIntoRowsorColumns(将单元格拆分为行或列)按钮（见图7.18），打开SplitCell（拆分单元格）对话框(图7.21)。③在SplitCell中选择拆分为Rows(行）还是拆分为Columns(列）。如果拆分为行，则在下面的NumberofRows（行数）文本框中输入插分的行数。如果拆分为列，则在下面的NumberofColumns（列数）文本框中输入插分的列数。网页设计table制作全文共85页，当前为第40页。41图7.20网页设计table制作全文共85页，当前为第41页。42图7.21网页设计table制作全文共85页，当前为第42页。43④设置完成，单击OK确认操作，效果见图7.22。合并和拆分单元格在需要将表格中的数据分成几类时非常有用。7.2.5编辑单元格在表格操作时，有时需要复制多个单元格并保留原先的格式。将单元格内容的复制、剪切、粘贴等操作称为编辑单元格。1.复制或剪切单元格①选中要复制或剪切的一个或多个单元格，并保证选中的单元格区域呈现矩形。②执行Edit|Copy命令，或按Ctrl+C键，即可将选中的单元格复制到剪贴板上；执行Edit|Cut命令，或按Ctrl+X键，即可将选中的单元格剪切到剪贴板上。网页设计table制作全文共85页，当前为第43页。44图7.22网页设计table制作全文共85页，当前为第44页。452.粘贴单元格①选择要粘贴数据的目标对象。如果希望将数据粘贴入单元格内，可以单击该单元格，将插入点放入该单元格内；如果希望将剪贴板中的数据粘贴为一个新的表格，可以在文档中将插入点放置到该位置上。②执行Edit|Paste命令，或按Ctrl+V键。在粘贴剪贴板中的单元格时，如果将完整的行和列数据粘贴入现有的表格中，则行和列数据会自动插入到表格中的相应位置上。如果将数据粘贴入一个单独的单元格中，则相应单元格区域中的内容会被替换。如果在表格之外的文档位置上粘贴表格，则会自动生成一个新的表格，并填入相应的行和列数据，图7.23、图7.24和图7.25分别是剪切、在表格内粘贴和在表格外粘贴单元格的效果。网页设计table制作全文共85页，当前为第45页。46图7.23网页设计table制作全文共85页，当前为第46页。47图7.24网页设计table制作全文共85页，当前为第47页。48图7.25网页设计table制作全文共85页，当前为第48页。49提示：可以将一个表格中的单元格粘贴到另一个表格中。3.删除单元格内容要删除选中单元格中的内容只需选中要删除其中内容的单元格，然后执行Edit|Clear命令，或是按下Del键。注意：如果选中的是整行或整列，则上述操作会删除表格的行或列。7.2.6表格排序表格作为处理数据的常见形式，经常需要对其中的内容进行排序。【例7.5】表格排序①选中表格。网页设计table制作全文共85页，当前为第49页。50②执行Commands|SortTable（命令|排序表格）命令（图7.26），打开SortTable（排序表格）对话框（图7.27）。③在SoftBy（排序依据）下拉列表中，选择以哪一列作为排序依据。④在Order（顺序）下拉列表中，可以设置排序的顺序。Alphabetically（字母），则以字母顺序排序，Numerically，则以数字大小排序。在右方的下拉列表中，可以进一步指定排序方向。Ascending（升序），则从字母A至Z，从数字0至9，按升序排序。Descending（降序），则从字母Z至A，从数字9至0，按降序排序。网页设计table制作全文共85页，当前为第50页。51图7.26网页设计table制作全文共85页，当前为第51页。52图7.27网页设计table制作全文共85页，当前为第52页。53⑤在ThenBy（其他排序依据）下拉列表中，可以选择以哪一列作为第二排序依据。同样，可以在Order区域设置排序顺序和排序方向。⑥如果选中SoftIncludesFirstRow（排序时包括首行）复选框，则在对表格数据排序时，同时也对首行进行排序；有时候表格的首行都是标题单元格（也即表格的首行作为表头），则可以清除该复选框。如果选中KeepTRAttributeWithSortedRow（保留排序行的TR属性）复选框，则在对表格排序后保留排序行中<Tr>标记的原有属性。⑦设置完毕，单击OK按钮，确定操作，表格即被排序（见图7.28）。注意：如果表格中包含Rowspan或Colspan属性，即使用了合并单元格或拆分单元格，则无法对之进行排序。这时如果确实需要拆分或合并单元格，可以先排序后拆分或合并。网页设计table制作全文共85页，当前为第53页。54图7.28网页设计table制作全文共85页，当前为第54页。557.3表格的格式化7.3.1设置表格的整体格式对表格的格式化操作，主要可以通过表格属性面板来完成。选中整张表格，这时的属性面板如图7.29所示。1.设置表格名称TableName（表格名称）：在属性面板左方的第一个文本框，也即TableName文本框中，可以设置表格的名称。为表格命名，便于页面描述语言JavaScript等对表格的操作。2.设置表格的行数和列数Rows（行）：在该文本框中，可以设置表格的行数。Cols（列）：在该文本框中，可以设置表格的列数。网页设计table制作全文共85页，当前为第55页。56图7.29网页设计table制作全文共85页，当前为第56页。57注意：行数和列数的设置可以增加或删除行和列。数值大于原值会增加行列，数值小于原值则删除行列。3.设置表格的高度和宽度W（宽度）：在该文本框中，可以输入表格的宽度数值，在右边的下拉列表框中，可以选择数值的单位。Pixel表示宽度是像素值，这时表格的宽度是绝对宽度，不随浏览器窗口的变化而变化。选择“%”，则表明表格的宽度是表格宽度相对于浏览器窗口宽度的百分比数值，这时表格宽度将随浏览器窗口的宽度变化而变化。H（高度）：在该文本框中，可以输入表格的高度数值，在右边的下拉列表框中，可以选择数值的单位，但一般来说，不需要设置表格的高度值。提示：选中表格，拖动表格边框上出现的控制，也可以改变表格的宽度和高度。如果希望在拖动鼠标时保持表格的长宽比，可以按住Shift键再拖动表格边框上的控制点。网页设计table制作全文共85页，当前为第57页。584.表格的对齐方式Align（对齐）：在该下拉列表框中，可以设置整张表格在浏览器窗口水平方向上的对齐方式。选择Left，表明表格同浏览器窗口在水平方向上左端对齐，Center，表示居中对齐，Right表示右对齐，Default，则采用浏览器指定的默认表格对齐方式，通常是左对齐。图7.30是表格的3种对齐方式。5.设置内部边距和单元格间距Cellpad（单元格内部边距）：该文本框设置表格内部内容同单元格内部边界之间的距离，单位是像素。Cellspace（单元格间距）：该文本框用于设置表格中单元格之间的距离，单位是像素。默认情况下大多数浏览器将单元格内部边距设置为1，而将单元格间距设置为2。网页设计table制作全文共85页，当前为第58页。59图7.30网页设计table制作全文共85页，当前为第59页。606.设置表格的边框格式Border（边框）：在该文本框中，可以设置表格的边框宽度值，其单位是像素。BrdrColor（边框颜色）：这是一个颜色框，可以设置整个边框的颜色,包括单元格边框。提示：在HTML中，还可以设置边框架颜色的另外两个属性，即亮边框（Bordercolorlight）和暗边框(Bordercolordark)，一般情况下,表格的左边框和上边框可以用加亮的颜色显示,右边框和下边框可以用较暗的颜色显示，整个边框呈立体感，Bordercolorlight设置表格左边和上边的边框,Bordercolordark设置表格右边和下边的边框。例如,下列语句定义了表格的亮边框为亮红色,暗边框颜色为暗红色。<tableborder=″20″bordercolorlight=″#ff0000″bordercolordark=″#990000″>网页设计table制作全文共85页，当前为第60页。61注意：表格边框设置的是整个表格四周的边框宽度，而不是各个单元格的边框宽度，但border=0时，整个表格都没有表格线，图7.31是border=20,Cellpadding=2,CellSpace=3时的表格边框,图7.32是border=0时的表格边框。7.设置表格背景BgColor（背景颜色）:这是一个颜色框,可以设置表格的背景颜色。可以单击颜色按钮选择颜色,也可以直接在颜色框中输入颜色的十六进制数值。BgImage(背景图像):在该文本框中，可以设置表格的背景图像。可以直接输入图像文件的URL地址，也可以单击右方的文件夹按钮，从磁盘上选择图像文件。如果同时设置背景颜色和背景图像,则显示的是背景图像。使用这两个属性,可以设置与页面不同的表格背景。网页设计table制作全文共85页，当前为第61页。62图7.31网页设计table制作全文共85页，当前为第62页。63图7.32网页设计table制作全文共85页，当前为第63页。648.清除表格的行高和列宽在表格的修改过程中,有时已经修改了表格的某些行的高度和列的宽度,但又觉得并不合适,这时可以使用清除表格的行高和列宽功能，清除表格中的行高和列宽数值。使表格恢复为最原始的状态。如果表格中有内容，则表格的宽度和高度将调整为正好容纳其中的内容。ClearRowHeights（清除行高）按钮：可以清除表格中所有的行高值，包括为表格和单元格设置的行高值等。ClearColumnWidths（清除列宽）按钮：可以清除表格中所有的列宽值，包括为表格和单元格设置的列宽值等。网页设计table制作全文共85页，当前为第64页。65提示：选中表格，执行Modify|Table|ClearCellHeights（清除单元格行高）命令，也可以完成清除表格行高的操作。执行Modify|Table|ClearCellWidths（改变单元格列宽）命令，可以完成清除表格列宽的操作。9.转换表格的宽度表格宽度的度量有两种方式，一种是绝对的像素值，这时表格的宽度不随浏览器窗口的变化而变化；另一种是百分比数值，这时表格的宽度随浏览器的窗口变化而变化。这两种方法各有其优缺点。使用绝对宽度，能够准确地保持单元格中数据的格式和位置，但是如果浏览器窗口过小，则需要拖动浏览器的水平滚动条浏览表格，这不便于对表格整体的观察。而使用相对宽度，则能够保持在浏览器窗口中看到整个表格行，但是随着浏览器窗口的变化，表格中内容的格式和位置可能也会发生变化，这在很多时候不利于对数据的查看。网页设计table制作全文共85页，当前为第65页。66在Dreamweaver中，提供了将表格的宽度数值在像素和百分比之间进行转换的功能，根据需要，随时将表格的宽度设置为需要的度量方式。这种转换用属性面板上的ConvertTableWidthstoPixels(将表格宽度转换为像素)和ConvertTableWidthsto%(将表格宽度转换为百分比)来完成。7.3.2设置行、列和单元格的格式行、列、单元的格式化指设置单元格的高度、宽度、单元格内部内容的对齐方式等。设置表格的行、列和单元格的格式，首先要选中相应的表格元素，然后在属性面板上设置相应属性的值。请注意，选中单元格和选中表格时的属性面板是不一样的（见图7.33），但选中的是行、表格列还是单元格时属性面板的内容都是一样的。因为行、列也不过是多个单元格的集合而已。网页设计table制作全文共85页，当前为第66页。67图7.33网页设计table制作全文共85页，当前为第67页。681.设置内容对齐方式Horz（水平）：该下拉列表用于设置一个或多个单元格内容在水平方向上相对单元格的对齐方式。有4种选择，即Left（居左）、Center（居中）、Right（居右）、Default（默认）。Default采用浏览器指定的水平对齐方式，通常是左对齐方式。在HTML中，水平对齐方式由<Table>标记的Align属性设置，当选择Default时，实际上就是删除Align属性，即取消水平对齐方式的设置。Vert（垂直）：在该下拉列表中，可以设置单元格内容在垂直方向上相对单元格的对齐方式。有5种选择，即Top（顶部）、Middle（居中）、Bottom（底端）、Baseline（基线）、Default（默认）。选择Default，则采用浏览器指定的默认垂直对齐方式，通常是居中对齐方式，这时也相当于在HTML中删除垂直对齐方式的属性Valign，即取消垂直对齐方式的设置。网页设计table制作全文共85页，当前为第68页。69注意：水平对齐和垂直对齐的意义和效果与在文本和图像中的对齐是一样的；单元格的对齐效果可以通过属性面板上部的文本对齐方式按钮实现，但它们的本质是不同的，单元格对齐方式设置的是<Td>标记的align属性和valign属性，它影响所设置的整个单元格；而文本对齐设置的是段落属性，它只影响所设置的一个或多个段落，如果两者都设置，则段落属性优先。2.设置单元格的宽度和高度在表格中，一行中的所有单元格的高度是一样的，一列中的所有单元格的宽度也是一样的。所以，单元格的高度就是相应行的高度，单元格的宽度就是相应列的宽度。网页设计table制作全文共85页，当前为第69页。70W（宽度）：该文本框设置单元格宽度值，如果输入数值，则表示是像素值；如果输入带有百分号的数字，如“40%”，则表示单元格宽度相对于整张表格宽度的百分比，但该值的设置一般不影响整个表格的宽度。H（高度）：该文本框用来设置单元格的高度。输入数字，表示像素值；输入带有百分号的数字，如“10%”，表示单元格高度相对于整张表格高度的百分比。注意：如果在一行中设置了多个单元格的高度，则行高以最高的设置为准，列宽也是一样，所以，设置时最好按行或列设置高度和宽度。用鼠标拖动的方法改变表格的行高和列宽更为方便。将鼠标移动到某行下方的边框上，当鼠标变为上下双箭头形状时拖动鼠标，即可以改变行高。将鼠标移动到某列右方的边框上，当鼠标变为左右双箭头形状时拖动鼠标，即可以改变列宽(见图7.34)。网页设计table制作全文共85页，当前为第70页。71图7.34网页设计table制作全文共85页，当前为第71页。723.设置单元格的边框颜色和背景单元格的边框颜色和背景是指定单元格四周的边框颜色和局部背景颜色，不是整个表格的边框和背景，也不是所有单元格的边框架和背景。通过单元格边框颜色和背景的设置，可以使不同的区域有不同的边框颜色和背景。如果设置的单元格边框颜色与背景颜色相同，可以实现局部无线表格的效果（见图7.35）。Brdr（边框颜色）：设置选中行、列或单元格的边框颜色。可以单击颜色按钮选择需要的颜色，也可以直接在颜色框中输入颜色的十六进制数值。网页设计table制作全文共85页，当前为第72页。73图7.35网页设计table制作全文共85页，当前为第73页。74Bg（背景）：上面一个Bg文本框用来设置单元格的背景图像。可以在该文本框中输入图像文件的URL地址，也可以单击右方的文件夹按钮，从磁盘上选择图像文件下面的Bg（背景）颜色框可以设置单元格的背景颜色。可以单击颜色按钮选择颜色，也可以在颜色框中输入颜色的十六进制数值。注意：单元格的边框颜色和背景颜色设置的是选中单元格的局部边框和背景颜色，对未设置的单元格，使用的是表格的相应属性值。4.控制单元格内容的换行方式由于表格单元格的区域受到限制，在显示长文本时如何换行就显得比较重要。NoWarp（不换行）：如果不选中该复选框，则在单元格中输入文本时，长度超出了单元格的宽度，文本会自动换行，单元格的高度增加，宽度保持不变。反之，如果选中该复选框，则在单元格中输入文本时，文本长度超出了单元格的宽度，文本不自动换行，单元格的宽度将随之变宽。网页设计table制作