第章表格单飞的鞋子.ppt

机械工业出版社同名教材 配套电子教案 表格基本操作 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 案例一：制作曙光大学网站就业信息网页 【案例综述】制作曙光大学网站就业信息栏目系列页面，使用表格技术制作就业信息展示页面。 【案例展示】本案例中的素材包括8幅图片，案例效果如图5-22所示。 5.1 表格基本操作 5.2.1 简单表格 最简单的表格仅包括行和列。表格的标记为table，行的标记为tr，表项的标记为td。其中，tr是单标记，一行的结束是新一行的开始。表项内容写在td与/td之间。table则必须成对使用。格式为： 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（左右调整）。 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：设置表格边框的色彩。 ? bordercolorlight：设置表格边框亮部的色彩。 ? bordercolordark：设置表格边框暗部的色彩。 ? rules=row,cols或none：设置表内线的显示方法，none为无内线。 5.2 XHTML表格 5.2.5 案例二：分析曙光大学网站就业信息栏目主页代码 本案例通过分析曙光大学网站就业信息网页的代码，使读者能够熟练掌握使用代码视图分析与设计表格。 打开前面制作的栏目主页work.html，切换到代码视图，下面就代码视图中关于表格标记的重要应用加以讲解。 1．定义表格时设置边框、单元格边距和单元格间距 2．定义