第五章网页中表格的处理

主要内容：第5章网页表格的处理创建表格编辑表格的方法设置表格属性用表格布局页面表格的格式化方法表格的排序方法4.1利用Dreamweaver8处理网页表格

4.1.1创建表格1．新建表格（1）在插入“常用”面板上，单击插入表格按钮。（2）在插入“常用”面板上，拖动表格按钮到主窗口的工作区中。（3）通过主窗口的菜单“插入”|“表格”命令。（4）使用快捷组合键“Ctrl+Alt+T”。执行完上述任何一种操作，都可以看到的“插入表格”对话框。

行数：初次指定表格的总行数。列数：初次指定表格的总列数。单元格填充：指定单元格的大小，以像素为单位。单元格间距：指定单元格之间的距离，以像素为单位。宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）。4.1.2编辑表格（1）选择整个表格：将光标置于某个单元格中，选择“修改”|“表格”|“选择表格”命令。将光标置于某个单元格中，按两次组合键“Ctrl+A”。将光标置于某个单元格中，单击鼠标右键，选择“表格”|“选择表格”命令。单击表格的边线。1．选择表格（2）选择单个单元格：将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。将光标置于所要选择的单元格中，选择“编辑”|“全选”命令。按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。（3）选择多个单元格：按住Ctrl键，单击所要选择的所有单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。如果要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。如果要选择整列，将光标置于该列的上边缘，当光标变成图标时单击鼠标左键。（4）选择的全部单元格：将光标置于第1个单元格中，拖动鼠标至最后一个单元格。将光标置于第1行的左边缘，当光标变成图标时，向下拖动鼠标至最后一行。将光标置于第1列的上边缘，当光标变成图标时，向右拖动鼠标至最后一列。

（1）表格中插入单元行：选择“修改”|“表格”|“插入行”命令。按组合键“Ctrl+M”。单击鼠标右键，选择“表格”|“插入行”命令。

2．添加/删除行列（2）在表格中插入单元列：选择“修改”|“表格”|“插入列”命令。按组合键“Ctrl+Shift+A”。单击鼠标右键，选择“表格”|“插入列”命令。（3）在表格中添加多行或多列：将光标移到要插入行或列附近的单元格中，单击鼠标右键，选择“表格”|“插入行或列”命令，或是选择“修改”|“表格”|“插入行或列”命令，在弹出的“插入行或列”对话框中进行相关的设置，然后单击“确定”按钮。

（4）删除整行/整列：先选择欲删除的整行或整列，直接按Del键。先将光标移到要删除的行或列中，选择“修改”|“表格”|“删除行”或“删除列”命令。将光标移到要删除的行或列中，单击鼠标右键，选择“表格”|“删除行”或“删除列”命令。

（1）设置表格的宽度及高度①通过鼠标拖曳法可以粗略地调整表格的大小。②通过“表格属性”面板可以精确地调整表格的大小。

3．修改表格大小（2）设置单元格的宽度及高度将光标置于需要设置宽度或高度的单元格中，此时属性面板显示单元格属性。在属性面板上的“宽”或“高”文本框中输入适当的数值即可。

4．合并/拆分单元格

（1）合并单元格选择“修改”|“表格”|“合并单元格”命令。单击鼠标右键，选择“表格”|“合并单元格”命令。按组合键“Ctrl+Alt+M”。（2）拆分单元格选择“修改”|“表格”|“拆分单元格”命令。单击鼠标右键，选择“表格”|“拆分单元格”命令。按组合键“Ctrl+Alt+S”。5．在表格中添加文字和图片

（1）在表格中添加文字在表格内按要求输入文字，调整文字的字号、字体、对齐方式等。

（2）在表格中插入图片选中要插入图片的单元格，选择“插入”|“图像”菜单命令，打开“选择图像源”对话框，在对话框中选择图像，选中图像文件之后，单击“确定”按钮。4.1.3表格属性的设置设置颜色背景通过属性面板上“背景颜色”后面的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色色码。设置图像背景在属性面板上的“背景图像”文本框中输入图像所在的路径，或是单击其后的文件夹图标，在弹出的对话框中选择图像文件。1．设置表格的背景2．设置表格的边框颜色和宽度

选择表格，单击其属性面板上“边框颜色”的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色色码。在表格属性面板上的“边框”文本框中输入边框的宽度数值。单击表格中的任一单元格，执行主菜单中的“命令”|“排序表格”命令，打开“排序表格”对话框；在“排序按”下拉列表框中选择要排序的列（第一关键字），在“顺序”下拉列表框中选择所需顺序；在“再按”下拉列表框中选择要进行次级排序的顺序；单击“确定”按钮完成设置。4.1.4表格的排序选择一个表格，然后执行主菜单中的“命令”|“格式化表格”命令，打开“格式化表格”对话框，从中选择一种模板方案，再对各选项进一步自定义设置，最后应用于自己所设计的表格中。4.1.5表格的格式化

4.1.6导入表格数据文件

选择“文件”|“导入”|“表格式数据”命令。选择“插入”|“表格对象”|“导入表格式数据”命令。Dreamweaver8提供了一种新的网页排版视图——布局视图（LayoutView）。打开“布局”面板绘制布局表格或布局单元格。4.1.7用表格进行页面布局

1．TABLE用于定义整个表格，表格内的所有内容都应该位于<TABLE>和</TABLE>之间。2．CAPTION表格标题应包括在<CAPTION>和</CAPTION>之间。CAPTION标记符的格式为：<CAPTIONalign="">标题</CAPTION>

4.2利用HTML处理网页表格4.2.1表格的基本构成

3．TR用于定义表格的行，对于每一个表格行，都对应一个TR标记符，它的结束标记符可以省略。4．TD和TH在表格行中的每个单元格，都对应于一个TD标记符或者TH标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。

1．合并单元格

4.2.2表格的编辑及属性设置

行合并：在<TD>和<TH>标记内使用rowspan属性，rowspan的取值表示垂直方向上合并的行数。列合并：在<TD>和<TH>标记内使用colspan属性，colspan的取值表示水平方向上的合并的列数。frame属性用于控制表格最外层的四条框线。rules属性用于控制是否显示单元格之间的分隔。border属性用于设置边框的宽度，其值为像素数。

2．边框与分隔线在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白，使用cellpadding属性可以控制表格分隔线和数据之间的距离，这两个属性之间的取值通常采用像素数。3．控制单元格空白

表格的页面对齐在TABLE标记符中使用align属性。用DIV标记符的align属性：将TABLE标记符包含在<DIValign=“”>和</DIV>之间。表格的内容对齐在标记符ＴＲ、ＴＨ、ＴＤ中使用align属性；4．表格的对齐

5．控制表格和单元格的大小

表格在网页中更多地是用作排版工具，要分割页面区域，就是设置表格和单元格大小。可以使用标记符的width和he