第十八讲 有关表格的基础知识

《第十八讲 有关表格的基础知识》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第十四讲有关表格的基础知识在上一讲中，我们学习了有关层的操作技术，同时学习了使用标尺、网格和跟踪图像设计页面布局的方法。在本讲中，我们将开始学习使用表格进行页面布局。通过本讲的学习，我们希望达到下面的学习目标：◆了解HTML中的表格格式设置优先级；◆学会创建和选择表格元素；◆了解导入和导出表格式数据；◆学会使用“扩展表格”模式；◆掌握设置表格和单元格的格式的方法。14.1使用表格布局页面表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。很多设计人员使用表格来对Web页进行布局。MacromediaDreamweaverM

2、X2004提供了两种查看和操作表格的方式：在“标准”模式中，表格显示为行和列的网格，而“布局”模式允许用户在将表格用作基础结构的同时在页面上绘制、调整方框的大小以及移动方框。表格由一行或多行组成；每行又由一个或多个单元格组成。虽然HTML代码中通常不明确指定列，但Dreamweaver允许用户操作列、行和单元格。当选定了表格或表格中有插入点时，Dreamweaver会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。用户可以根据需要打开或关闭宽度和菜单。14.1.1HTML

3、中的表格格式设置优先级当在“设计”视图中对表格进行格式设置时，用户可以设置整个表格或表格中所选行、列或单元格的属性。如果将整个表格的某个属性（例如背景颜色或对齐）设置为一个值，而将单个单元格的属性设置为另一个值，则单元格格式设置优先于行格式设置，行格式设置又优先于表格格式设置。表格格式设置的优先顺序如下：1.单元格2.行3.表格例如，如果将单个单元格的背景颜色设置为蓝色，第一行的颜色设为绿色，然后将整个表格的背景颜色设置为黄色，则蓝色单元格不会变为黄色或绿色，因为单元格格式设置优先于表格和行格式设置。绿色的行不会是黄色的，因为行的格式设置优先

4、于表格的格式设置。当设置列的属性时，Dreamweaver更改对应于该列中每个单元格的td标签的属性。如果用户未看到表的宽度或列的宽度，说明没有在HTML代码中指定该表或列的宽度。如果出现两个数字，说明“设计”视图中显示的可视宽度与HTML代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小，或将内容添加到比设置宽度大的单元格时会发生这种情况。例如，如果用户将某列的宽度设置为200像素，而添加的内容将宽度延长为250像素，则该列将显示两个数字：“200”（代码中指定的宽度）和“(250)”6（位于括号中的数值，表示该列呈现在屏幕上的可视

5、宽度）。用户可以在一个设置了列宽的表格中，插入一个比该列列宽宽的图片。插入了图片的单元格的列宽就有二个数值。括号外的数值表示代码中指定的宽度。位于括号中的数值，表示该列呈现在屏幕上的可视宽度。图片的宽度与括号内的数值一致。14.1.2创建和选择表格元素使用“插入”栏或“插入”菜单来创建一个新表格。如果要插入表格，则依照下列步骤操作：1.先在“文档”窗口的“设计”视图中，将插入点放在需要表格出现的位置；2.然后可以选择“插入”>“表格”或者在“插入”栏的“常用”或“布局”类别中，单击“表格”按钮。打开了“插入表格”对话框；3.设置“插入表格”对

6、话框选项：ü◇“行数”与“列数”确定表格具有的行/列的数目；ü◇“表格宽度”以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度；ü◇“边框粗细”以像素为单位指定表格边框的宽度。如果没有明确指定边框粗细的值，则大多数浏览器按边框粗细设置为1显示表格。若要确保浏览器不显示表格边框，请将边框粗细设置为0。若要在边框粗细设置为0时查看单元格和表格边框，请选择“查看”>“可视化助理”>“表格边框”；ü◇“单元格边距”确定单元格边框和单元格内容之间的像素数；ü◇“单元格间距”确定相邻的表格单元格之间的像素数。如果没有明确指定单元格间距和单元格边距的值

7、，则大多数浏览器按单元格边距设置为1，单元格间距设置为2显示表格。若要确保浏览器不显示表格中的边距和间距，请将“单元格边距”和“单元格间距”设置为0；ü◇在“页眉”部分选择一个页眉选项：a)“无”对表不启用列或行标题；b)“左侧”可以将表的第一列作为标题列，以便为表中的每一行输入一个标题；c)“顶部”可以将表的第一行作为标题行，以便为表中的每一列输入一个标题；d)“两者”使用户能够在表中输入列标题和行标题。最好使用标题以方便使用屏幕阅读器的Web站点访问者。屏幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪表格信息，◇在“辅助功能”部分指定以下

8、选项：a)“标题”提供了一个显示在表格外的表格标题。b)“对齐标题”指定表格标题相对于表格的显示位置。c)“摘要”给出了表格的说明。屏幕阅读器可以读取摘要文本，但是