网页制作入门必备大师珍藏版哈工大.ppt

第12章 使用表格,表格是用来在页面中显示表格式数据的元素。很多网页设计人员使用表格进行页面布。本章详细讲解下使用表格和用表格进行页面布局的方法。,12.1 表格的基础知识,一般表格都是由很多行或列组成，其中每个格子称为“单元格”。其中表格的显示由边框、内边距和单元格边距构成。按照表格的组成，内容元素中定义的样式将覆盖外部元素中定义的样式。 在“文档窗口”中，边框为0的表格，一般会以双虚线的格式显示，如图左所示。在浏览器中，边框为0的表格，不会显示边线，如右图所示。,12.2 创建表格,选择“插入”|“表格”命令，可以打开“表格”对话框，如图所示。,12.3 选择表格,选取表格是对表格进行进一步操作的基础。其中包括，选择整个表格、选择行或列、选择单元格三个部分。,12.3.1 选择整个表格,可以执行以下操作之一来选择整个表格。 单击表格的边框。 单击表格内的任意位置，然后在“文档窗口”的底部，选择元素，如左图所示。 使用鼠标，表格的起始位置，拖拽到结束位置。 单击表格内的某个位置，然后选择“修改”|“表格”|“选择表格”。 选择后的表格，将在表格边缘显示黑色的选择线，如右图所示。,12.3.2 选择表格的行或列,可以执行以下操作之一来选择表格的行或列。 使用鼠标悬停在表格行或列的边缘，当鼠标显示为箭头形状时，单击鼠标。 单击表格的某个位置，按住“Shift”键，单击所选的表格，选择行或者列（也可以同时选择几行或几列表格）。 单击表格的某个位置，然后在“文档窗口”的底部，选择元素，可以选择单元格所在的行。 在已经选择的表格下面，单击三角形标志，在打开的菜单中选择“选择列”选项，可以选择相应的列，如图所示。 选择表格的行或列后，表格的显示效果，如图所示。,12.3.3 选择单元格,可以执行以下操作之一来选择表格的单元格。 单击单元格中的某个位置，选择“编辑”|“全选”命令。 按住“Ctrl”键，单击所选的单元格。 单击表格的某个位置，然后在“文档窗口”的底部，选择元素。 按住“Ctrl”键，单击要选的单元格，可以同时选择几个单元格。选择表格的单元格后，表格的显示效果，如图所示。,12.4 定义表格属性,表格属性，包括表格的整体属性、行或列的属性和单元格的属性。,12.4.1 表格的整体属性,选择表格后，在属性窗口会显示相应的属性。根据选择的内容不同，属性面板的参数也有所区别。选择整个表格时，属性面板的显示效果，如图所示。,12.4.2 表格的行、列或单元格属性,选择表格行、列或单元格后，属性面板的显示效果，如图所示。,12.5 处理表格内部元素,处理表格内部元素，是指对表格中的行、列或者单元格进行处理。其内容包括添加或删除行和列、拆分和合并单元格、处理表格的元素等。,12.5.1 添加或删除行和列,添加或删除行和列是控制表格显示效果的最基本操作，通过这两个操作，可以更改表格整体的显示效果。具体内容如下所示。 1添加行和列 2删除行和列 3使用属性面板添加或删除行或列 可以通过更改属性面板中行或列的参数来添加或删除行或列。更改参数后，将在表格的右侧添加或删除的列。在表格的底部添加或删除行。,12.5.2 合并和拆分单元格,合并和拆分单元格可以对表格进行更精细的划分，通过这两个操作，可以使表格中数据的显示方式更加多样化。具体内容如下所示。 1合并单元格的条件 合并单元格的含义就是将几个单元格合并成一个。所以所选的单元格必须能够相邻成行或者列，或者几个矩形能够排列成一个完整的矩形。如果几个单元格排列的不规则，或不相邻，则不能合并单元格。 2合并单元格 3拆分单元格 单击要拆分的单元格，执行下列操作之一，拆分单元格。,12.5.3 处理表格元素,处理表格元素，包括复制或剪切表格、粘贴单元格、删除单元格等。通过相应的操作，可以方便的制作更多的表格，和重复的表格内容具体内容如下所示。 1复制或剪切表格 与合并单元格类似，只有相邻的排列方式为矩形的单元格，才能够复制和剪切。 2粘贴单元格 3删除单元格 在Dreamweaver中，没有直接删除单元格的命令。选择单元格，使用“Delete”键可以删除表格中的内容，但不能删除单元格。,12.6 调整表格的大小,调整表格的大小，包括调整表格的整体大小、调整表格行或列的大小、调整单元格大小等三个部分。,12.6.1 调整表格的整体大小,选择表格，执行下列操作之一，调整表格的整体大小。 在表格的属性面板中通过更改参数，调整表格的大小。 使用鼠标，拖动表格边缘的选框，调整表格的大小。 在拖动选框，调整表格大小时，会以虚线显示调整后表格的大小，如图所示。,12.6.2 调整表格行或列的大小,选择表格中要调整的行或列，执行下列操作之一，调整表格行或列的大小。 在表格的属性面板中通过更改参数，调整表格的大小。 使用鼠标，拖动表格边缘的选框，调整表格的大小。 根据所要调整的行或列的位置不同，以及所要调整的效果不同，具体的调整方法也有所区别。,12.6.3 清除宽度和高度,在调整表格大小时，如果要重新定义表格的宽度或高度，可以清除已经定义的宽度和高度。 选择表格，执行下列操作之一，清除表格的宽度或高度。 选择“修改”|“表格”|“清除单元格宽度”命令，或者“修改”|“表格”|“清楚单元格高度”命令。 在“属性”面板中，选择“”按钮清除单元格宽度，选择“”按钮清除单元格高度。 单击表格底部的三角形，在打开的下拉菜单中选择“清除所有宽度”或者“清除所有高度”选项。,12.6.4 冲突的宽度和高度,如果同时定义了表格的宽度和高度，同时定义了单元格的宽度和高度，就有可能出现高度和宽度冲突的情况。下面讲解下高度和宽度冲突时的显示效果。 1单元格大小之和与表格大小冲突 当单元格定义的宽度之和与表格的宽度不一致时，表格的宽度会保持不变，按照单元格定义的宽度，按照比例分配单元格的宽度。 2单元格宽度或高度冲突,12.7 嵌套的表格,在表格中需要添加嵌套表格的地方单击鼠标，选择“插入记录”|“表格”命令，可以插入嵌套的表格。嵌套表格的显示效果，如图所示。,12.8 使用表格布局,使用表格对网页进行布局，并不是推荐的布局方法（推荐使用CSS样式进行布局），但是依然有很多设计师使用表格进行布局。下面讲解使用表格布局的方法。,12.8.1 表格模式,在Dreamweaver中，表格有两种显示模式，标准模式、扩展模式。在两种模式下，表格的显示效果会有所区别。 表格的标准模式和扩展模式其实并没有本质的差别，只是在显示效果上有所不同。,12.9 表格与代码,在Dreamweaver中，设计视图中制作的所有内容，都回对应相应的XHTML代码（或者HTML代码，具体使用的代码和页面的文档类型有关）。除了在设计视图中更改表格的各种属性外，也可以在代码视图中修改代码来实现对表格的编辑。,12.9.1 表格结构与代码,从上面的学习中，可以了解到表格可以分为以下几个部分，整体表格、表格名称、标题、行或列、单元格等。不同的表格部分会对应相应的表格元素。在设计视图中，制作一个两行两列的表格，其显示效果如图所示。,12.9.2 表格属性与代码,设计视图中，表格属性面板中的每个属性，如宽度、边框等都对应相应的代码。在设计视图中，制作一个表格，其显示效果如图所示。,12.10 小结,本章主要讲解了使用表格的各种知识，其中包括表格的创建、选择等。其中比较重要的是调整表格的大小、拆分表格以及表格高度和宽度的确定等知识。表格作为显示数据的元素，在网页中经常用到，熟练使用表格，并学会利用表格的特点对网页内容的显示很有帮助。,12.10 本章习题,1以下哪种方式可以选择表格？ A单击表格的边框。 B单击表格内