应用表格布局-《网页设计制作》

《应用表格布局-《网页设计制作》》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、最终效果图完成页面布局一个简单示例本章导读学会插入表格掌握表格的基本操作学会设置表格属性掌握表格的高级操作第4章表格的应用学习目标页面布局是网页制作的一个重要部分，使用表格布局页面是一种最常用的手段。本章将学习在网页中插入表格以及表格的操作，让读者熟练掌握对表格的使用。本章要点插入表格表格的基本操作设置表格属性表格的高级操作4.1插入表格在网页制作中，表格的功能较多，可用表格对网页中的文本、图像及其他元素进行定位，也可有序地排列数据等，为网页制作提供了很大的方便。下面将讲解表格的创建方法以及如何添加表格的内容。3.1插入表格

2、3.1.1插入表格的方法3.1.2嵌套表格的创建3.1.3在表格中添加内容3.1.4应用举例——在网页中插入表格并添加网页元素3.1.1插入表格的方法表格不仅可以为页面进行宏观的布局，还可以使页面中的文本、图像等元素更有条理。一张表格横向叫行，纵向叫列。行列交叉部分就叫做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。3.1.2嵌套表格的创建表格可进行嵌套。嵌套表格是指在表格的某个单元格中再插入一个表格，其宽度受所在单元格的宽度限制。当单个表格不能满足布局的需求时，可以进

3、行嵌套表格的创建。3.1.3在表格中添加内容在表格中可添加各种网页元素。添加表格内容的方法很简单，只需将光标插入点定位到所需的单元格中，然后按照添加网页元素的方法操作即可。3.1.4应用举例——在网页中插入表格并添加网页元素下面为“繁花似锦”网页进行表格的添加和网页元素的添加。最终效果图3.2表格的基本操作通常插入的表格并不符合要求，这时可根据实际情况对表格进行一些基本操作，如合并及拆分单元格、删除和添加行或列等。3.2表格的基本操作3.2.1选中操作3.2.2单元格的合并及拆分3.2.3插入、删除行或列3.2.1选中操作在

4、对表格进行操作之前需先将表格选中。可以选中整个表格，也可以只选中某行或某列甚至某个单元格。3.2.1选中操作1．整个表格的选中2．行或列的选中3．单元格的选中1．整个表格的选中选中整个表格有以下几种方法：将光标移到表格边框线上，当边框线为红色且光标变为形状时，单击鼠标左键即可。将光标移到表格的边框上，当鼠标光标变为或的形状时单击鼠标即可。将光标插入点定位到表格的任一单元格中，单击窗口左下角标签选择器中的

5、的绿线中的按钮，如这里单击按钮，在弹出的快捷菜单中选择“选择表格”命令即可。2．行或列的选中行、列的选中方法如下：将光标移到所需行的左侧，当光标变为形状且该行的边框线变为红色时单击鼠标即可选中该行。将光标移到所需列的上端，当光标变为形状且该列的边框线变为红色时单击鼠标左键即可选中该列。3．单元格的选中单个单元格的选中与多个单元格的选中操作不相同，下面将分别介绍。1）单个单元格的选中2）多个单元格的选中3.2.2单元格的合并及拆分为了更好地对网页进行布局，在使用表格时常常需要把单元格进行拆分或合并，特别是在页面内容非常多的

6、情况下，更加需要这些操作。3.2.2单元格的合并及拆分1．单元格的拆分2．单元格的合并1．单元格的拆分当表格中的单元格不够使用时，可将单元格拆分。2．单元格的合并合并单元格的操作比较简单，选中要合并的单元格区域并单击“属性”面板左下角的按钮即可。3.2.3插入、删除行或列在进行网页制作时，若插入表格的行、列不够或行、列太多，则可根据实际情况进行插入或删除行、列的操作。3.2.3插入、删除行或列1．行或列的插入2．行或列的删除1．行或列的插入行或列的插入有单行、单列的插入和多行、多列的插入两种情况。1）单行或单列的插入2）多行

7、或多列的插入插入单行或单列插入多行或多列“修改”>“表格”>“插入行或列”2．行或列的删除将光标插入点定位到所需单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格/删除行”命令可删除光标插入点所在的行；选择“表格/删除列”命令可删除光标插入点所在的列。3.3表格属性在“属性”面板中可对表格进行宽度、边框粗细、对齐、背景颜色或背景图像等的属性设置。3.3表格属性8.3.1设置表格属性8.3.2设置单元格属性3.3.1设置表格属性选中表格后，“属性”面板可在其中进行各项设置。“表格Id”下拉列表框“行”和“列”文本框“宽

8、”和“高”文本框“填充”文本框“间距”文本框“对齐”下拉列表框“边框”文本框“边框颜色”文本框3.3.1设置表格属性“背景颜色”文本框“背景图像”文本框单击按钮可删除表格的列宽值。单击按钮可删除表格的行高值。单击按钮可将表格宽度单位从浏览器窗口的百分比转换为像素。单击