DW-07使用表格讲解

网站建设主讲：韩维良四月24第7章使用表格第一节使用表格对页面进行布局由于网页的主要组成元素是文字、图形或其它一些可视化元素（如Flash动画、图像或文本段落），为了不使它们从一个边缘流向另一个边缘，必须将它们插入到一个“容器”中，这个“容器”就是表格。

表格能将页面划分为任意矩形区域，除了可以使大量的信息资料有组织地排列起来以便管理外，还可以用于网页布局，将网页中的元素放到表格的单元格中进行页面排版，是最常用的一种控制页面整体布局的工具。28四月2024教育学院3实际上，在Internet上的绝大多数网页都是用表格辅助布局的。借助表格实现网页的精细排版。可以说表格的灵活应用是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了网页设计师的水平。28四月2024教育学院4一、版面布局概述一般情况下一个网页主要包括：LOGO（标志），Banner（横幅广告条），导航栏，导航菜单，网页正文，版权声明。在设计页面布局时，也正是围绕着这些元素展开的。在页面制作过程中要确定一个页面的布局（版式），应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。

28四月2024教育学院5做一个网页，尤其是主页，先要规划好版面布局（页面的条块分割）。如同一个容器，规划好位置。几种常用的版式（分栏结构）：二分栏，三分栏的结构等。

28四月2024教育学院628四月2024教育学院728四月2024教育学院8常见的网页布局类型：有“国”字型、“匡”字型、“三”字型、“川”字型等。1．“国”字型2．“匡”字型3．“三”字型4．“川”字型5．其他类型(1)封面型(2)Flash型(3)框架型6、网页页面的构成1）网页尺寸根据屏幕分辨率的大小设计网页的宽度。一般如果屏幕分辨率为800*600那么设计网页的尺寸为780*428，如果屏幕分辨率为1024*768，那么设计页面尺寸为980*600。2）页头（页眉）通常放置logo（网站标志）和banner（广告条）3）页脚放置版权信息、联系电话、网站介绍、备案信息等等。4）导航栏各版块栏目的超链接。第二节插入表格一、创建表格1、插入表格在文档窗口的设计视图中，将插入点置于要插入表格的位置，单击“插入”菜单中的“表格”或单击插入栏的“常用”中的“插入表格”按钮，或者Ctrl+Alt+T。设置行列数以及边框等。28四月2024教育学院16在对话框中进行选项设置。行、列数：用于设置插入表格的行数和列数。表格宽度：用于设置表格的宽度，选择“像素”为单位时，表格的宽度为固定像素的宽度；选择“百分比”为单位时，表格的宽度与其上一级窗口的宽度将保持相同的百分比。边框粗细：用于设置表格的边框宽度。单元格边距：(属性面板是填充)用于设置表格中单元格中的内容与单元格边框的距离。28四月2024教育学院18单元格间距：用于设置表格中单元格之间的间距。页眉：把表格的第一行或第一列作为标题行或标题列，作为标题行或标题列的行或列的内容将以粗体的形式显示。分别为无、左、顶部、两者。即确定是否启用表格的行列标题。在左侧为行标题，在顶部为列标题。

辅助功能中的标题：用于设置表格标题，该标题在表格的外侧。(选中后，可知，也作为表格的一部分)

摘要：用于描述表格的相关信息。28四月2024教育学院1928四月2024教育学院20辅助中的标题表格宽度菜单：单击表格中的任意位置，在表格的上方或者下方显示宽度和宽度分布。单击其中的小三角可以对其进行相应的设置。也可以在“查看”中“可视化助理”的“表格宽度”中设置显示或者隐藏，默认显示。28四月2024教育学院21实践：实现如下的操作。28四月2024教育学院22在网页中插入表格后，可以向单元格中直接输入文本或插入其它的对象，如图像、动画等，还可以向表格中插入嵌套表格。另外,表格内容的排版等。当然，用户也可以从外部导入其它软件编辑的表格，如Excel电子表格等。28四月2024教育学院232、表格的html标签<tablewidth="300"border="1">

<tr><td>a1</td><td>b1</td></tr><tr><td>a2</td><td>b2</td></tr></table>28四月2024教育学院24<table></table>表格标记<tr></tr>行标记<td></td>单元格标记28四月2024教育学院25第三节选择表格一、选择表格鼠标指针指向表格左上角，当鼠标指针右下角出现表格图形时，单击。将光标指向表格边框，单击鼠标，可以选择整个表格。“修改”—“表格”—“选定表格”；右击，选“表格”—“选定表格”表格内任意单击，在“标签选择器”中单击<table>其它方法不常用略。28四月2024教育学院26二、选择表格的行或列鼠标指针指向行左边缘或者列的顶边，出现实心箭头时单击，或者单击并拖动可选择多行或者多列。从某处按下左键，拖动出一个多行多列的矩形区域。插入点置于某单元格中时，在“标签选择器”单击<tr>，则选中插入点所在的行。单击表格宽度菜单中的小三角，选“选择列”28四月2024教育学院27三、选择单元格1、选择单个单元格Ctrl+单击在单元格中单击，按下Ctrl+A2、选择相邻的单元格单击首，Shift+单击尾3、选择不相邻的单元格Ctrl+逐个单击28四月2024教育学院2828四月20244、用“标签选择器”选择单元格插入点置于某单元格中时，在“标签选择器”中单击<td>，则选中插入点所在单元格。教育学院29网页中插入的表格状态栏中的“标签选择器”第四节设置表格的属性选择要设置属性的表格区域(可以是整个表格、一行或一列或一个单元格)后，在属性面板中设置。28四月2024教育学院30表格：用于设置表格的名称。行和列：用于设置表格的行数和列数。

宽：用于设置表格的宽度，单位为“百分比”或“像素”。

填充：用于设置单元格中的内容与边框之间的距离。（单位：象素）(内边距)，在表格插入对话框称为单元格边距。间距：用于设置单元格之间的距离，（单位：象素）

对齐：用于设置表格在网页中的对齐方式。28四月2024教育学院3128四月2024教育学院28四月2024教育学院33border(边框的厚度)内容内容内容内容cellpadding(单元格填充)cellspacing(单元格间距)边框：用于设置表格外边框的宽度。

类：用于设置表格的CSS样式。

单击按钮，（宽度橡皮擦）可以取消单元格的宽度设置，使其宽度随单元格的内容自动缩放。

单击按钮，（高度橡皮擦）可以取消单元格的高度设置，使其高度随单元格的内容自动调整。

单击按钮，可以将表格宽度转换为像素。

单击按钮，可以将表格宽度转换为百分比。28四月2024教育学院3428四月2024教育学院第五节设置行、列和单元格的属性单击某单元格，在属性面板中可以设置其属性，上半部分为单元格内文本的属性，下半部分为单元格的属性。28四月2024教育学院36一、拆分和合并单元格拆分单元格的操作是将一个单元格拆分为几个连续的单元格；拆分方法：选取一个单元格，单击属性面板中的“拆分单元格为行或列”按钮→填写拆分行（列）的数目。28四月2024教育学院37合并是将多个连续的单元格合并成一个；合并方法：选取待合并的多个连续的单元格，单击属性面板中的“合并所选单元格”按钮。二、设置单元格内容的对齐方式水平：设置单元格内容在水平方向上的对齐方式，主要有：默认、左、中、右。垂直：设置单元格内容在垂直方向上的对齐方式，主要有：默认、顶端、剧中、底部、基线。28四月2024教育学院38三、设置单元格背景选取单元格，在属性面板中的“背景”中添加背景图片或在“背景颜色”中选取一种颜色或利用16进制数指定一种颜色；28四月2024教育学院39第六节表格基本操作一、调整表格大小1、调整列宽：拖动列右边框。2、调整行高：拖动行下边框。3、调整表宽：选中表格，拖动右侧尺寸控点。4、调整表高：选中表格，拖动底边尺寸控点。5、同时调整表宽表高：选中表格，拖动右下角尺寸控点。28四月2024教育学院40二、清除和均化表格大小1、清除所有高度方法：选中表格，选择表格宽度菜单中的“清除所有高度”。或者“修改”—“表格”—“清除单元格高度”。使表格高度收缩至最小程度，即不能再小了。28四月2024教育学院412、清除所有宽度方法：选中表格，选择表格宽度菜单中的“清除所有宽度”。或者“修改”—“表格”—“清除单元格宽度”。使表格宽度收缩至最小程度，即不能再小了。3、统一所有宽度宽度不一致现象：代码设置与可视化属性中设置的不一致。方法：选中表格，选择表格宽度菜单中的“使所有宽度一致”28四月2024教育学院424、统一列宽调整表格中的各列宽度后，可以使再其宽度相同。方法：单击某一列，在其列宽度菜单中，选择“清除列宽”。28四月2024教育学院43三、增加行和列1、增加行方法：右击某行→“表格”—“插入行”/“插入行或列”；“修改”—“表格”—“插入行”/“插入行或列”命令。“插入”—“表格对象”—“在上面插入行”/“在下面插入行”命令。选中表格，在属性面板中“行”数中增加数值。28四月2024教育学院4428四月2024教育学院452、增加列方法：右击某列→“表格”—“插入列”/“插入行或列”；“修改”—“表格”—“插入列”/“插入行或列”命令。“插入”—“表格对象”—“在左边插入列”/“在右边插入列”命令。选中表格，在属性面板中“列”数中增加数值。28四月2024教育学院46四、删除表格元素1、删除单元格内的对象方法：选中一个或者多个单元格，按Delete，或者“编辑”—“清除”。2、删除行方法：在欲删除的行中单击，选择“修改”—“表格”—“删除行”命令；在欲删除的行中右击，选择“删除行”命令；选中表格，在属性面板中“行”数中减少数值，则从表格底部删除相应的行数。28四月2024教育学院473、删除列方法：在欲删除的列中单击，选择“修改”—“表格”—“删除列”命令；在欲删除的列中右击，选择“删除列”命令；选中表格，在属性面板中“列”数中减少数值，则从表格右端删除相应的列数。28四月2024教育学院48五、剪切、复制和粘贴单元格1、剪切或者复制单元格方法：选中一个包含一个或者多个单元格的矩形区域，“编辑”—“剪切”/“复制”，或者Ctrl+X/Ctrl+C;如果选中区域包含整行或者整列，则为剪切后删除所含的整行或者整列，反之，剪切后仅清除所选单元格的内容，复制对原内容没有影响。28四月2024教育学院492、粘贴单元格单击欲粘贴处,“编辑”—“粘贴”，或者Ctrl+V;如果是粘贴整行整列，则将插入整行或者整列。也可选择性的粘贴：单击欲粘贴处,“编辑”—“选择性粘贴”;再选择粘贴类型。28四月2024教育学院50六、合并和拆分单元格1、合并方法：选中欲合并的多个相邻单元格，“修改”—“表格”—“合并单元格”或者右击选择“表格”—“合并单元格”。或者单击某单元格，“修改”—“表格”—“增加行宽”，则向下合并一行。单击某单元格，“修改”—“表格”—“增加列宽”，则向右合并一列。28四月2024教育学院512、拆分方法：选中欲拆分的单元格，“修改”—“表格”—“拆分单元格”或者右击选择“表格”—“拆分单元格”。再选择拆分类型以及相应拆分数量。28四月2024教育学院52或者单击某个合并后的单元格，“修改”—“表格”—“减少行宽”，则在其下方拆分出一行。单击某单元格，“修改”—“表格”—“减少列宽”，则在其右侧拆分出一列。28四月2024教育学院53七、表格嵌套在一个表格中嵌套另一个表格，在网页设计中是非常普遍的操作，从而保证各自属性的设置不受干扰。方法：单击现有表格中的一个单元格，选择“插入”菜单中的“表格”

,设置相关属性。练习：设计一个二分栏的页面布局。28四月2024教育学院54第七节操作数据表格一、导入表格数据可以将在Excel表格或者文本文件中的表格式数据导入到Dreamweaver中。前提：导入到网页中的表格，须以CSV格式或文本格式以特定的分隔符分隔才可以实现导入。如将EXCEL中的电子表格另存为CSV格式（一个工作表存为一个CSV文件）。28四月2024教育学院55方法：单击欲插入处，选择“文件”—“导入”—“表格式数据”或选择“插入”—“表格对象”—“导入表格式数据”菜单命令。也可以导入Excel的原始数据，有时兼容性不好，出错。28四月2024教育学院56二、导出表格数据方法：将插入点置于欲导出的表格中，选择“文件”—“导出”—“表格”。再选择定界符和换行符的类型。导出的表格格式为：CSV格式。28四