网页制作与实训 教学课件 作者 谭建辉 主编 宋爱林 副主编第6章.ppt

《网页制作与实训 教学课件 作者 谭建辉 主编 宋爱林 副主编第6章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章表格网页本章要点内容:表格的基本概念和组成元素。表格的基本操作。表格的深入使用。利用表格排版。本章学习目标了解表格在网页页面排版中的重要作用。能够对表格进行基本操作并综合实例掌握基本排版技巧。把握表格的排序、数据导入导出以及美化等深入应用。本章学前要求对基本网页操作有所了解，已经学会了文本、图片以及超链接的运用。6.1认识表格如果读者具有计算机基础，学习过Office系列的办公软件，那么表格应该是一个常见的概念，在网页制作的过程中，表格的概念和Office中的表格基本相似，如图6.1所示。图6.1是表格基本元素的示意图，示意图是

2、一张3行×3列的表格，横向叫行，纵向叫列。行列交叉部分就叫做单元格。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。单元格中的内容和单元格边框的距离叫单元格填充，又称边距。学习时请注意这几个概念和表格标记中属性的对应关系。图6.1表格基本元素示意图表格和单元格的宽度、高度、边框、背景等属性都可以调整，有利于进行全页面的布局排版，特别是边框宽度可以设置为0，从而在浏览器中隐藏表格，让用户感觉不到表格的存在。表格的每个单元格实际上可以看成一个独立的容器，可以插入几乎所有的网页元素，其位置相对于表格来说是固定的，但却伴随着表格宽度高度

3、的更改，因此插入的网页元素可以按照设计者的意愿放置在网页的任何角落。另外，表格的行和列可以被随时插入、删除、复制、粘贴，单元格还可以被拆分或合并，这都为制作网页带来了巨大的灵活性。正是表格具有以上的特点，因此通常认为熟悉运用表格是制作高质量高水准网页的重要手段，尤其是现在那些知名的大型网站，已经离不开表格的帮助。以下是一些经典的使用表格网页，图6.2是联想公司的网站，图6.3是著名的265上网导航。以上两个实例是运用表格的典型案例，其中联想公司的网站看不到表格的边框，265上网导航的网站明显有表格边框，而且边框很细，布局复杂。提示：在

4、HTML语言中，表格由表格标记、行标记、单元格标记三个标记构成，举例说明一个两行两列表格的基本标记就是如下：

5、始创建表格了。为了读者能够从整体上掌握表格的基本操作，我们准备了一个实例（原始资料在第六章“本章实例”目录下），如图6.4所示，这是“公安院校学生服务系统”网站的一个页面，由两个大的表格组成，其中第二张表格还涉及到了表格的嵌套使用。本章就以这个实例的制作过程作为介绍表格网页制作的主线，从头到位按按步骤对表格创建、修改和调整的常规用法进行连贯的讲解，与此同时以简单的HTML语言描述所做操作在HTML语言中的引起的变化，希望读者能够自己分析更多的表格实例，尽快的掌握表格的使用技巧。图6.4本章实例步骤1：新建一个基本的HTML网页并保存，命

6、名为index.html，在属性面板中将本页的对齐方式设置为中间对齐，在插入表格之前，我们先建立一个样式表，使得表格内的文字大小都为12“表格”，样式表如下：table{font.size:12px;}步骤2：在插入栏选择表格按钮或选择“插入”菜单的“表格”命令，系统弹出表格对话框如图6.5所示。图6.5“表格”对话框步骤3：初步设置表格，行数为2，列数为1，宽度600，单元格边距为0，单元格间距为2，“页眉”选择“无”，表格的“标题”可以不填写，“对齐标题”可选择默认，“摘要

7、”一般为空，设置完毕单击“确定”，生成表格，如图6.6所示。在表格对话框中，“表格宽度”的单位是像素，也可以是百分比。“边框粗细”、“单元格边距”和“单元格间距”的单位都是像素。在“辅助功能”区域，如果我们填写“标题”，则会在表格的上部自动插入我们输入的文本作为表格的标题，在“对齐标题”中可以选择该标题的对齐方式，默认的对齐方式为居中对齐。标题在HTML语言中的标记是，代码如下：

8、释的，在HTML语言中的标记是summary，代码表示如下：表格体提示：1.表格的宽度通常情况下我们选择“像素”，主要是因为选择“百分比”的时候表