第3章表格的使用.ppt

第第3章章 表格的使用表格的使用学习目标：学习目标：本章主要介绍表格的操作，使用表格布局网页。本章主要介绍表格的操作，使用表格布局网页。要求要求:1.熟练掌握建立表格、编辑表格、熟练掌握建立表格、编辑表格、设置表格属性基本操作。设置表格属性基本操作。2.了解如何用表格来布局网页元素了解如何用表格来布局网页元素;3.掌握表格布局的两种模式：标准模式和布局模式。并掌握表格布局的两种模式：标准模式和布局模式。并 能熟练运用这两种模式布局网页。能熟练运用这两种模式布局网页。第第3章章 表格的使用表格的使用v3.1 创建表格创建表格v3.2 编辑表格编辑表格v3.3 布局视图模式布局视图模式v3.4 用表格布局网页用表格布局网页3.1 创建表格创建表格 表格在网页中是一种用途广泛的工具。它表格在网页中是一种用途广泛的工具。它可以有序地排列数据，更重要的是可以精确定可以有序地排列数据，更重要的是可以精确定位文本、图像及其他网页元素。表格是由行和位文本、图像及其他网页元素。表格是由行和列组成列组成.3.1 创建表格创建表格单元格：由行和列相交所产生的区域。单元格：由行和列相交所产生的区域。单元格填充：单元格中的内容与单元格边框之间单元格填充：单元格中的内容与单元格边框之间的距离。的距离。单元格间距：单元格与单元格之间的空间大小。单元格间距：单元格与单元格之间的空间大小。3.1 创建表格创建表格v3.1.1 建立表格建立表格1.建立表格的方法有以下几种，可任选一种。建立表格的方法有以下几种，可任选一种。将光标定位，单击将光标定位，单击【常用常用】工具栏中的工具栏中的【表格表格】按钮按钮;将将【常用常用】工具栏中的工具栏中的【表格表格】按钮拖到页面相应的位置。按钮拖到页面相应的位置。将光标定位，选择主菜单将光标定位，选择主菜单【插入插入】/【表格表格】命令。命令。3.1 创建表格创建表格v3.1.2 在表格中添加内容在表格中添加内容v表格建立好后，就可以向表格中添加内容了。例如文本、图表格建立好后，就可以向表格中添加内容了。例如文本、图像、表格等网页元素。文本可直接输入，随着文本的增多，像、表格等网页元素。文本可直接输入，随着文本的增多，表格会自动增高。表格会自动增高。v在单元格中插入图像同文档插入图像方法相同，如果单元格在单元格中插入图像同文档插入图像方法相同，如果单元格的尺寸小于图像的尺寸，则图像插入后，单元格会自动增高的尺寸小于图像的尺寸，则图像插入后，单元格会自动增高或增宽。或增宽。v如果在表格的单元格继续插入表格，就构成了嵌套表格，内如果在表格的单元格继续插入表格，就构成了嵌套表格，内嵌表格可以将一个单元格分成许多行和列。内嵌表格越多，嵌表格可以将一个单元格分成许多行和列。内嵌表格越多，浏览器所花费的下载时间越长，因此一般内嵌的表格最多不浏览器所花费的下载时间越长，因此一般内嵌的表格最多不超过超过3 层。层。3.2 编辑表格编辑表格 表格建立好，就可以对它进行编辑。编辑表格建立好，就可以对它进行编辑。编辑表格要先选择表格对象。表格对象的选择包括表格要先选择表格对象。表格对象的选择包括选择行、选择列、选择单元格、选择整个表格。选择行、选择列、选择单元格、选择整个表格。3.2 编辑表格编辑表格3.2.1 选择表格对象选择表格对象3.2.2 设置表格属性设置表格属性3.2.3 设置行、列与单元格属性设置行、列与单元格属性3.2.4 增加、删除行或列增加、删除行或列3.2.5 表格的快速格式化表格的快速格式化3.2.6 创建细线表格创建细线表格3.2.7 表格的其他操作表格的其他操作3.2.1 选择表格对象选择表格对象1选择整个表格选择整个表格有多种方法，这里介绍两种:v单击表格的边框线，选定表格v将光标移到要选择的表格内，单击状态栏的“”标签。2选择行选择行v将鼠标指针置于表格行最左侧，会变为指向右侧的粗黑箭头，单击即选中此行。选中后上下拖动鼠标，可选中多行。v将光标移到要选择的行中，然后单击状态栏的“”标签，可选择此行。3.2.1 选择表格对象选择表格对象3选择列选择列 将鼠标指针置于表格列最上方，会变为指向下侧的粗黑箭头，单击即选中此行。选中后左右拖动鼠标，可选中多列。3.2.1 选择表格对象选择表格对象4选择单元格选择单元格v只要在想选择的单元格内单击，即选择了该单元格。状态栏上的标签处于选中的状态，3.2.1 选择表格对象选择表格对象5选择不相邻的单元格、行或列选择不相邻的单元格、行或列v按住Ctrl键，依次单击，可选中不相邻的单元格、行或列。v在已选择的连续单元格、行或列中按住Ctrl键，然后单击不需选中的单元格、行或列。3.2.1 选择表格对象选择表格对象3.2.2 设置表格属性设置表格属性v【表格的表格的ID】：如果要在网页中使用：如果要在网页中使用JavaScript语言来控制表格，就需语言来控制表格，就需 要为表格的取名。要为表格的取名。v【行和列行和列】：设置表格的行数和列数，这两个值必须给定。重新设置行：设置表格的行数和列数，这两个值必须给定。重新设置行和列，可以增加或减少表格行数或列数。和列，可以增加或减少表格行数或列数。v【宽和高宽和高】：设定表格的宽度和高度。单位可以是像素或百分比。表格：设定表格的宽度和高度。单位可以是像素或百分比。表格的宽度值必须给定。而高度值可以不设定，由实际内容来决定表格的高的宽度值必须给定。而高度值可以不设定，由实际内容来决定表格的高度。通过设置表格的宽度和高度可以改变表格的大小。当然也可以拖动度。通过设置表格的宽度和高度可以改变表格的大小。当然也可以拖动边框线来改变表格的大小，但这种方法不准确。边框线来改变表格的大小，但这种方法不准确。v【填充填充】：设定单元格内容与边距之间的距离。对应表格的属性：设定单元格内容与边距之间的距离。对应表格的属性“cellpadding”。v【间距间距】：单元格与单元格之间的距离。对应表格的属性：单元格与单元格之间的距离。对应表格的属性“cellspacing”。v若不指定填充和间距的值，则多数浏览器按填充为若不指定填充和间距的值，则多数浏览器按填充为1、间距为、间距为2来显示表来显示表格。格。3.2.2 设置表格属性设置表格属性v【对齐对齐】：设定表格的对齐方式，有：设定表格的对齐方式，有4 个选项：个选项：【默认默认】、【居中对齐居中对齐】、【左对齐左对齐】、【右对齐右对齐】。选择。选择【默认默认】选选项，则按左对齐显示。项，则按左对齐显示。v【边框边框】：设定表格边框的宽度，单位为像素。绝大多数浏：设定表格边框的宽度，单位为像素。绝大多数浏览器以三维线条显示表格，若设值为览器以三维线条显示表格，若设值为0，表示没有边框。可，表示没有边框。可以在编辑状态下选择以在编辑状态下选择【查看查看】/【可视化助理可视化助理】/【表格边框表格边框】命令，显示表格的虚线框。命令，显示表格的虚线框。【背景颜色背景颜色】：设置表格的背景：设置表格的背景颜色。颜色。v【背景图像背景图像】：设置表格的背景图像。：设置表格的背景图像。v【边框颜色边框颜色】：设置表格的边框颜色。：设置表格的边框颜色。v和按钮：清除行高和列宽。和按钮：清除行高和列宽。v 和按钮：和按钮：根椐当前值，把列宽转换为像素值和百分比。根椐当前值，把列宽转换为像素值和百分比。v和按钮：根椐当前值，把行高转换为像素值和百分比。和按钮：根椐当前值，把行高转换为像素值和百分比。3.2.3 设置行、列与单元格属性设置行、列与单元格属性 选定表格的行、列或单元格，选定表格的行、列或单元格，【属性属性】面面板显示的参数基本是相同。如图板显示的参数基本是相同。如图3-5所示。通所示。通过过【属性属性】面板可以重新设置所选对象。面板可以重新设置所选对象。3.2.4 增加、删除行或列 增加、删除表格的行数或列数，除了可以通过增加、删除表格的行数或列数，除了可以通过【属性属性】面板重新定义表面板重新定义表格的行数、列数这种方法外，还可以通过菜单命令来实现。步骤：格的行数、列数这种方法外，还可以通过菜单命令来实现。步骤：将光标定位于要插入新行（列）的单元格。将光标定位于要插入新行（列）的单元格。v要增加一行，选择菜单要增加一行，选择菜单【修改修改】/【表格表格】/【插入行插入行】命令，或单击右命令，或单击右键，选择快捷菜单中的键，选择快捷菜单中的【表格表格】/【插入行插入行】命令。则在光标所在单元格命令。则在光标所在单元格的上面增加了一行。的上面增加了一行。v要增加一列，选择菜单要增加一列，选择菜单【修改修改】/【表格表格】/【插入列插入列】命令，或单击右命令，或单击右键，选择快捷菜单中的键，选择快捷菜单中的【表格表格】/【插入列插入列】命令。则在光标所在单元格命令。则在光标所在单元格的左侧增加了一列。的左侧增加了一列。v要增加多行或多列，选择菜单要增加多行或多列，选择菜单【修改修改】/【表格表格】/【插入行或列插入行或列】命令，命令，弹出弹出【插入行或列插入行或列】对话框，如图对话框，如图3-7所示。进行选择设置，单击所示。进行选择设置，单击【确确定定】按钮，可完成插入操作。按钮，可完成插入操作。v删除行、列也是先将光标定位于要删除的行或列中，然后选择菜单删除行、列也是先将光标定位于要删除的行或列中，然后选择菜单【修修改改】/【删除行删除行】或或【删除列删除列】命令；或单击右键，选择快捷菜单中的命令；或单击右键，选择快捷菜单中的【表格表格】/【删除行删除行】或或【删除列删除列】命令，将行或列删除。命令，将行或列删除。3.2.5 表格的快速格式化 除了可以通过除了可以通过【属性属性】面板对表格格式化外，面板对表格格式化外，在在Dreamweaver系统中还提供了十几种表格模板系统中还提供了十几种表格模板来快速格式化表格。另外，这些模板也不是固定不来快速格式化表格。另外，这些模板也不是固定不变，可通过设置模板参数，调整表格外观。步骤：变，可通过设置模板参数，调整表格外观。步骤：v选定表格，选择菜单选定表格，选择菜单【命令命令】/【格式化表格格式化表格】命命令，弹出令，弹出【格式化表格格式化表格】对话框。如图对话框。如图3-8所示。所示。3.2.5 表格的快速格式化3.2.5 表格的快速格式化在列表框中选定一种格式。在列表框中选定一种格式。可以对选项进行设置：可以对选项进行设置：v【行颜色行颜色】：包括：包括3个选项，用于定义表格中每一行的颜色。个选项，用于定义表格中每一行的颜色。v第一种：为表格中的行设置一种颜色。第一种：为表格中的行设置一种颜色。v第二种：为表格中的行设置另一种颜色。第二种：为表格中的行设置另一种颜色。v交错：两种行颜色交替出现的方式，共有交错：两种行颜色交替出现的方式，共有【不要交错不要交错】、【每一行每一行】、【每每二行二行】、【每三行每三行】、【每四行每四行】5个选项。个选项。v【第一行第一行】：包括：包括4个选项，用于设置表格顶部第一行的各项属性参数。个选项，用于设置表格顶部第一行的各项属性参数。v对齐：其下拉列表中包括对齐：其下拉列表中包括4个选项：个选项：【无无】、【左对齐左对齐】、【居中对齐居中对齐】、【左对齐左对齐】。v文字样式：其下拉列表中包括文字样式：其下拉列表中包括4个选项：个选项：【常规常规】、【粗体粗体】、【斜体斜体】、【加粗斜体加粗斜体】。v背景色和文本颜色：设置第一行的背景色和文本颜色。背景色和文本颜色：设置第一行的背景色和文本颜色。v【最左列最左列】：用于设置表格左侧第：用于设置表格左侧第1列的各项属性参数。有列的各项属性参数。有2个选项：个选项：【对对齐齐】、【文字样式文字样式】。设置方法同上。设置方法同上。v【边框边框】：用于设置表格的边框宽度，以像素为单位。：用于设置表格的边框宽度，以像素为单位。v【将所有属性套用至将所有属性套用至TD标注而不是标注而不是TR标签标签】：在：在HTML标签中，标签中，“表示表示表格的行表格的行”，“表示数据单元格表示数据