第03章-使用表格布局页面

《网页设计与制作基础教程(第3版)》第三章使用表格布局页面:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::学习目标

在网页中插入的文本和图像会随着浏览器窗口的放大与缩小发生变化，这使得网页处于不稳定的显示状态。要解决这种状态，最简单的方法就是使用表格，表格不仅能够控制网页在浏览器窗口中的位置，还可以控制网页元素在网页中的显示位置。:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::本章重点

创建基本表格

插入表格元素

调整表格大小

导入与导出表格数据

使用表格制作网页:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.1使用表格

网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地表达设计者的思想。

网页中表格的用途创建表格插入表格元素

设置表格属性:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.1.1网页中表格的用途

使用表格排版的页面在不同平台、不同分辨率的浏览器中都能保持其原有的布局，并且在不同的浏览器平台中具有较好的兼容性，所以表格式网页中最常用的排版方式之一。:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.1.2创建表格

表格是用于在HTML页面上显示表格式数据以及对文本和图形进行布局的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。

插入表格

插入嵌套表格:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.1.3插入表格元素

为了使网页中的元素能够有序的在浏览器中显示，用户在插入文本和图像之前，最好先插入一个表格。在表格中插入文本与图像的方法与直接在网页中插入基本相同，只是在插入之前，需要先将鼠标光标放置在表格中。

在表格中输入文本在表格中插入图像:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.1.4设置表格属性

表格由单元格组成，即使是一个最简单的表格，也由一个单元格。而表格与单元格的属性完全不同，选择不同的对象（表格或单元格），“属性”检查器将会显示相应的选项参数。

表格属性单元格属性:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.2编辑表格

当用户创建的表格不符合网页设计的要求时，可以通过拆分与合并表格中的单元格，或者增加与删除表格行或列来达到所需的目的。除此之外，在表格中还可以执行复制、剪切、粘贴等操作，并保存原有单元格的格式。

选择表格元素调整表格大小更改列宽和行高

添加或删除行或列

拆分与合并单元格

复制与粘贴单元格

设置表格内容排序

导入与导出表格式数据:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.2.1选择表格元素

将鼠标光标放置在网页中的表格内，“属性”检查器将显示单元格的属性，而不是表格的属性。这说明选中的单元格，而非表格。在网页中创建一个表格，既包括表格自身，还包含单元格、行与列等元素，而这些元素的选择方法各不相同。

选择整个表格

选中行和列

选中单元格

选中单元格区域

选中不相邻的单元格:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.2.2调整表格大小

当用户选中网页中的表格后，在表格右下角区域将显示3个控制点，通过拖动这3个控制点可以将表格横向、纵向或者整体放大。:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.2.3更改列宽和行高

要更改单元格的列宽和行高，可以在“属性”面板中调整数值，或拖动列或行的边框来更改表格的列宽或行高；也可以在“代码”视图中修改HTML代码来更改单元格的宽度和高度。:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.2.4添加或删除行或列

表格中空白的单元格也会占据页面位置，所以多余的行或列可以删除；此外，也可以在特定行或列上方或左侧添加行或列。:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.2.5拆分与合并单元格

在制作页面时，如果插入的表格与实际效果不相符，例如有缺少或多余单元格的情况，可根据需要，进行拆分和合并单元格操作。:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.2.6复制与粘贴单元格

用户在DreamweaverCC中插入表格并选中表格中一个单元格后，选择“编辑”命令，在弹出的的菜单中可以对表格执行“剪切”、“拷贝”、“粘贴”等操作。:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.2.7设置表格内容排序

对于网页中插入的表格，用户可以根据单个列的内容对表格中的行进行排序或者根据两个列的内容执行更加复杂的表格排序。:::::《计算机基础与实训教材系列》系列丛书官方网站edu:::::3.2.8导入与导出表格式数据

使用Dreamweav