第5篇 表格.pptVIP

* * 主要内容 表格基本操作 XHTML表格 表格布局页面的综合应用 第5章 表格 5.1.1 创建表格 表格是页面布局极为有用的设计工具。在设计页面时，往往要利用表格来定位页面元素。使用表格可以导入表格化数据，设计页面分栏，定位页面上的文本和图像等。 在Dreamweaver中插入表格的方法如下: ① 将光标放到要插入表格的位置。 ② 执行下列操作之一： ? 执行“插入”→“表格”命令。 ? 单击插入面板“常用”分类中的“表格”按钮 。 ? 按〈Ctrl〉+〈Alt〉+〈T〉组合键。· 5.1 表格基本操作 5.1.2 设置表格属性 当用户创建了一个表格后，可以通过属性面板进一步设置表格及单元格的属性，美化表格的外观。 1．设置表格属性 2．设置单元格及行列属性 5.1 表格基本操作 5.1.3 表格的基本操作 1．向表格添加内容 2．选择表格元素 3．调整表格及行列的大小 4．添加及删除行和列 5．复制、粘贴和删除单元格 5.1 表格基本操作 5.1.4 案例一：制作课程表 【案例综述】制作曙光大学班级课程表。 【案例展示】掌握表格的创建方法和表格属性的设置。 5.1 表格基本操作 5.1.4 案例一：制作曙光大学班级课程表 5.1 表格基本操作 5.1.4 案例二：制作曙光大学网站就业信息网页 【案例综述】制作曙光大学网站就业信息栏目系列页面，使用表格技术制作就业信息展示页面。 【案例展示】掌握嵌套表格的制作和简单的表格版面布局。 5.1 表格基本操作 5.1.4 案例二：制作曙光大学网站就业信息网页 5.1 表格基本操作 5.1.4 案例二：制作曙光大学网站就业信息网页 5.1 表格基本操作 5.2.1 简单表格 最简单的表格仅包括行和列。表格的标记为table，行的标记为tr，表项的标记为td。其中，tr是单标记，一行的结束是新一行的开始。表项内容写在td与/td之间。table则必须成对使用。 5.2 XHTML表格 5.2.1 简单表格 格式为： table border=n width=x|x% height=y|y% cellspacing=i cellpadding=j caption align=left|right|top|bottom valign=top|bottom标题/caption tr th表头1/th th表头2/th th…/th th表头n/th/tr tr td表项1/td td表项2/td td…/td td表项n/td/tr … tr td表项1/td td表项2/td td…/td td表项n/td/tr /table 5.2 XHTML表格 5.2.2 表格内文字的对齐方式 在默认情况下，表项居于单元格的左端。可用列、行的属性设置表项数据在单元格中的位置。 1．水平对齐 表项数据的水平对齐用标记th、td和tr的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。 5.2 XHTML表格 5.2.2 表格内文字的对齐方式 2．垂直对齐 表项数据的垂直对齐用标记th、td和tr的valign属性实现。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。 5.2 XHTML表格 5.2.3 表格在页面中的对齐方式 把表格作为一个整体，介绍表格在页面中的位置及背景的设置。与图像一样，表格在浏览器窗口中的位置也有三种：居左、居中和居右。使用table标记的align属性。格式为： table align=left|center|right 当表格位于页面的左侧或右侧时，文本填充在另一侧；当表格居中时，表格两边没有文本；当align属性缺省时，文本在表格的下面。 5.2 XHTML表格 5.2.4 表格的色彩和图像背景 在table、th、tr、td标记中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图像，也可以为行和单元格改变色彩、添加背景图像。 ? bgcolor：设置背景色彩。 ? background：设置背景图像。 ? bordercolor：设置表格边框的色彩。 5.2 XHTML表格 5.2.5 案例二：分析曙光大学网站就业信息栏目主页代码 本案例通过分析曙光大学网站就业信息网页的代码，使读者能够熟练掌握使用代码视图分析与设计表格。 打开前面制作的栏目主页work.html，切换到代码