搜索
第12章使用表格表格是用来在页面中显示表格式数据的元素。很多网页设计人员使用表格进行页面布。本章详细讲解下使用表格和用表格进行页面布局的方法。12.1表格的基础知识一般表格都是由很多行或列组成，其中每个格子称为“单元格”。其中表格的显示由边框、内边距和单元格边距构成。按照表格的组成，内容元素中定义的样式将覆盖外部元素中定义的样式。在“文档窗口”中，边框为0的表格，一般会以双虚线的格式显示，如图左所示。在浏览器中，边框为0的表格，不会显示边线，如右图所示。12.2创建表格选择“插入”|“表格”命令，可以打开“表格”对话框，如图所示。12.3选择表格选取表格是对表格进行进一步操作的基础。其中包括，选择整个表格、选择行或列、选择单元格三个部分。12.3.1选择整个表格可以执行以下操作之一来选择整个表格。单击表格的边框。单击表格内的任意位置，然后在“文档窗口”的底部，选择table元素，如左图所示。使用鼠标，表格的起始位置，拖拽到结束位置。单击表格内的某个位置，然后选择“修改”|“表格”|“选择表格”。选择后的表格，将在表格边缘显示黑色的选择线，如右图所示。12.3.2选择表格的行或列可以执行以下操作之一来选择表格的行或列。使用鼠标悬停在表格行或列的边缘，当鼠标显示为箭头形状时，单击鼠标。单击表格的某个位置，按住“Shift”键，单击所选的表格，选择行或者列（也可以同时选择几行或几列表格）。单击表格的某个位置，然后在“文档窗口”的底部，选择tr元素，可以选择单元格所在的行。在已经选择的表格下面，单击三角形标志，在打开的菜单中选择“选择列”选项，可以选择相应的列，如图所示。选择表格的行或列后，表格的显示效果，如图所示。12.3.3选择单元格可以执行以下操作之一来选择表格的单元格。单击单元格中的某个位置，选择“编辑”|“全选”命令。按住“Ctrl”键，单击所选的单元格。单击表格的某个位置，然后在“文档窗口”的底部，选择td元素。按住“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．单击表格内的任意位置，然后在“文档窗口”的底部，选择table元素。C．使用鼠标，表格的起始位置，拖拽到结束位置。D．单击表格内的某个位置。2．表格含有下列哪些属性？A.行和列属性B.填充属性C.间距属性D.对齐属性3．在Dreamweaver中对单元格都可以进行哪些操作？A.合并单元格B.删除一列C.调整单元格大小D.分离某个单元格