04网页表格的处理

通过本章学习，应该掌握以下内容：第4章网页表格的处理1.创建表格的方法2.编辑表格的方法3.表格的排序方法4.表格的格式化方法5.设置表格属性的方法6.用表格设计页面布局的方法4.1利用DreamweaverMX处理网页表格4.1.1创建表格利用DreamweaverMX创建新表格时，首先打开插入“常用”面板，然后可以通过下列四种方式中的任意一种：（1）在插入“常用”面板上，单击插入表格按钮。（2）通过主窗口的菜单“插入”|“表格”命令。（3）使用快捷组合键“Ctrl+Alt+T”。（4）在插入“常用”面板上，拖动表格按钮到主窗口的工作区中。执行完上述任何一种操作，都可以看到如图所示的“插入表格”对话框。•行数：初次指定表格的总行数。•列数：初次指定表格的总列数。•单元格填充：指定单元格的大小，以像素为单位。•单元格间距：指定单元格之间的距离，以像素为单位。•宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。•边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）。4.1.2编辑表格（1）如果要选择整个表格，可进行如下的操作之一：•将光标置于表格中的某个单元格中，选择“修改”|“表格”|“选择表格”命令。•将光标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。•将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“选择表格”命令。•将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。•单击表格的边线。1．选择表格（2）选择单个单元格的方法有以下几种：•将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。•将光标置于所要选择的单元格中，向右拖动鼠标。•将光标置于所要选择的单元格中，选择“编辑”|“全选”命令。•按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。（3）选择多个单元格的方法有以下几种：•按住Ctrl键，单击所要选择的所有单元格。•将光标置于单元格中，拖动鼠标，选择多个单元格。•如果要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。•如果要选择整列，将光标置于该列的上边缘，当光标变成图标时单击鼠标左键。（4）选择的全部单元格的方法有以下几种：•将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。•将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。•将光标置于第1行的左边缘，当光标变成图标时，向下拖动鼠标至最后一行。•将光标置于第1列的上边缘，当光标变成图标时，向右拖动鼠标至最后一列。（1）在现有的表格中插入单元行，可以选择以下的操作之一：•将光标移到要插入单元行的下一行，选择“修改”|“表格”|“插入行”命令。•将光标移到要插入单元行的下一行，按组合键“Ctrl+M”。•将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“插入行”命令。2．添加/删除行列（2）在现有的表格中插入单元列，可以选择以上的操作之一：•将光标移到在插入单元列的右边一列，选择“修改”|“表格”|“插入列”命令。•将光标移到要插入单元列的右边一列，按组合键“Ctrl+Shift+A”。•将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“插入列”命令。（3）如果想在现有的表格中添加多行或多列，可执行以下操作：首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的下拉菜单中选择“表格”|“插入行或列”命令，或是选择“修改”|“表格”|“插入行或列”命令，将弹出如图4-5所示的“插入行或列”对话框。在此对话框中进行相关的设置，然后单击“确定”按钮，设置的多列或多行将插入到页面中。（4）删除整行/整列，可以采用下列办法之一：•先选择欲删除的整行或整列，直接按Del键，即可删除。•先将光标移到要删除的行或列中，选择“修改”|“表格”|“删除行”或“删除列”命令。•将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“删除行”或“删除列”命令。（1）设置表格的宽度及高度在DreamweaverMX中，修改表格的大小有以下两种方法。①通过鼠标拖曳法可以粗略地调整表格的大小。②通过“表格属性”对话框可以精确地调整表格的大小。在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，可以通过表格属性面板来确定。3．修改表格大小（2）设置单元格的宽度及高度在默认情况下，单元格的宽度是随表格的宽度而定的，表格中每一列的宽度基本上都相等，也就是说每一个单元格的宽度都是相同的。如果不指定表格的高度，则表格中同一行的高度也是相等的，即单元格的高度相同。在属性面板上可以改变单元格默认的宽度和高度。将光标置于需要设置宽度或高度的单元格中，此时属性面板显示单元格属性。在属性面板上的“宽”或“高”文本框中输入适当的数值即可。但单元格宽度与高度的单位只可以使用像素，不能使用百分比。4．合并/拆分单元格（1）合并单元格首先在表格中选择需合并的单元格，属性面板变成单元格属性面板，然后选择下列操作之一：•选择“修改”|“表格”|“合并单元格”命令。•单击鼠标右键，在弹出的快捷菜单中选择“表格”|“合并单元格”命令。•按组合键“Ctrl+Alt+M”。•单击单元格属性面板上的合并单元格图标。（2）拆分单元格首先在表格中选择需拆分的单元格，选择下列任何一种操作：•选择“修改”|“表格”|“拆分单元格”命令。•单击鼠标右键，在弹出的下拉菜单中选择“表格”|“拆分单元格”命令。•按组合键“Ctrl+Alt+S”。•单击属性面板上的拆分单元格图标。在“拆分单元格”对话框中，可以选择拆分成行和列以及行/列的数量。4.1.3表格属性的设置要将表格背景设为单一的颜色，首先选择整个表格，再单击属性面板上“背景颜色”后面的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码；要将图像设为表格的背景，首先选择整个表格，再在属性面板上的“背景图像”文本框中输入图像所在的路径，或是单击其后的文件夹图标，在弹出的对话框中选择图像文件。1．设置表格的背景5．在表格中添加文字和图片（1）在表格中添加文字在上图中的表格内按要求输入文字，调整文字的字号、字体、对齐方式等。（2）在表格中插入图片①选中要插入图片的单元格，选择“插入”|“图像”菜单命令，打开“选择图像源”对话框，如图所示；②在对话框中选择图像，选中图像文件之后，单击“确认”按钮，图片即插入到相应的单元格里。2．设置表格的边框颜色和宽度设置表格的边框颜色和宽度时，必须指定表格的边框线的宽度不为0。要为表格的边框指定颜色和宽度，可按如下步骤进行。（1）选择表格，单击其属性面板上“边框颜色”的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码，即可为表格的边框添加颜色。（2）在表格属性面板上的“边框”文本框中输入边框的宽度数值。在DreamweaverMX中可以实现按数字的排序和按字母的排序，具体操作方法如下：（1）单击表格中的任一单元格，执行主菜单中的“命令”|“排序表格”命令，打开“排序表格”对话框，如图所示。（2）在“排序按”下拉列表框中选择要排序的列（第一关键字），在“顺序”下拉列表框中选择所需顺序。（3）在“再按”下拉列表框中选择要进行次级排序的顺序。（4）单击“确定”按钮完成设置。4.1.4表格的排序DreamweaverMX预置了十几种表格设计，使用这些预置的表格样式格式化表格，可以大大提高表格的设计效率。格式化表格的具体操作方法如下：选择一个表格，然后执行主菜单中的“命令”|“格式化表格”命令，打开如图所示的“格式化表格”对话框。从中选择一种模板方案，再对各选项进一步自定义设置，然后应用于自己所设计的表格中。4.1.5表格的格式化DreamweaverMX提供了一种新的网页排版视图——布局视图（LayoutView），在这种视图模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像。步骤如下：1．打开“布局视图”面板(通过布局工具栏)2.绘制布局表格4.1.6用表格进行页面布局在HTML中一个普通的表格应包括以下标记符：1．TABLETABLE标记符用于定义整个表格，表格内的所有内容都应该位于TABLE和/TABLE之间。2．CAPTION如果表格需要标题，那么就应该使用CAPTION标记符将表格标题包括在CAPTION和/CAPTION之间。CAPTION标记符的格式为：CAPTIONalign=标题/CAPTION4.2利用HTML处理网页表格4.2.1表格的基本构成3．TRTR标记符用于定义表格的行，对于每一个表格行，都对应一个TR标记符。TR标记符的结束标记符可以省略。4．TD和TH在表格行中的每个单元格，都对应于一个TD标记符或者TH标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。TD与TH的功能和用法几乎完全相同，唯一不同之处在于TD表示普通表格数据，而TH表示表格的行列标题数据。TD和TH的结束标记符都可以省略，并且可以不包括任何内容。1．合并单元格4.2.2表格的编辑及属性设置在TD和TH标记内使用rowspan属性可以进行行合并，rowspan的取值表示垂直方向上合并的行数。在TD和TH标记内使用colspan属性可以进行列合并，colspan的取值表示水平方向上的合并的列数。在TABLE标记内使用frame、rules和border属性可以设置表格的边框和单元格分隔线。表格边框表示表格最外层的四条框线，可以用frame属性进行控制；rules属性用于控制是否显示单元格之间的分隔线；border属性用于设置边框的宽度，其值为像素数。如果设置border=0，则意味着frame=void，rules=none。2．边框与分隔线在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白，使用cellpadding属性可以控制表格分隔线和数据之间的距离，这两个属性之间的取值通常采用像素数。3．控制单元格空白（1）表格的页面对齐表格在页面中的对齐与其他页面内容一样，可以直接在TABLE标记符中使用align属性。另外，也可以用DIV标记符的align属性设置表格的对齐，方法是：将TABLE标记符包含在DIValign=“”和/DIV之间。（2）表格的内容对齐表格单元格内容的对齐包括各数据项在水平方向和垂直方向上的对齐。4．表格的对齐5．控制表格和单元格的大小由于表格能将网页划分为任意大小的矩形区域，所以表格在网页中更多地是用作排版工具。如果要分割页面区域，经常要做的就是设置表格和单元格大小。可以使用标记符的width和height属性设置表格和单元格大小，这两个属性的取值可以是像素数，也可以是百分比，但一般都使用绝对的像素数。6．设置表格和单元格的背景与设置整个页面的背景类似，表格或单元格也可以设置背景颜色或图案；设置方法为：在TABLE、TR或TD标记符内使用bgcolor属性设置背景颜色；使用background属性设置背景图案。“插入表格”对话框返回“选择图像源”对话框返回“排序表格”对话框返回“格式化表格”对话框返回END