HTML表格与单元格标记的使用.ppt

效果如图： 教学难点 教学内容 教学目的 教学重点 教学过程 项目三 HTML表格与单元格标记的使用 上一页 下一页 课程trtrrtrtrtrtrrtt 下一页 上一页 退出 主菜单 教学目的 重点难点 教学方式 课程设计 教学过程 课程作业 课程小结 教学参考 主菜单 重点难点 教学内容 课程作业 课程小结 教学参考 教学目的 课程trtrrtrtrtrtrrtt 上一页 上一页 下一页 退出 主菜单 重点难点 教学内容 课程作业 课程小结 教学参考 教学目的 退出 * 返回上一级 教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页 教学目的 1、掌握表格的插入 2、掌握单元格的相关操作 3、用表格布局制作一个网页 4、表格嵌套与叠加 教学重点 1、表格的插入 2、单元格的相关操作 教学难点 1、表格的插入 2、单元格的相关操作 3、用表格布局制作一个网页 引言： 　 在网页设计中适当的使用表格将不同性质和部分加以区分，不但能使整个网页看起来整齐而且可读性增高。下面我们介绍表格的各种属性设定、如何在表格加入文字、图片等对象、表格标题以及利用表格来配置版面。 （一）演示并讲解用表格布局制作的网页 1、演示学完HTML后要完成的如图3-1中国茶吧网站中的网上商城页面。 图3-1 中国茶吧网站中网上商城页面 2、演示本次课要完成的用表格制作如图3-2的页面内容。 1、表格的建立 　 语法说明如下表： Th是table header的缩写，用来定义表格的字段名称，在 标记内的文字预设水平对齐与垂直对齐皆为居中对齐且 字体加粗。在th标记内亦可加入align和valign两个属 性来控制该字段内的对齐方式，有效范围只限该栏的数 据。若在tr内，此两属性对该行中的所有字段均有效。 th标记 Td是table data的缩写，用来声明这是字段数据的开始， 在储存单元内的数据预设靠左且置中。/td可略。 td标记 Tr是table row缩写，用来声明这是表格中水平线的开 始。/tr可省略。 tr标记 table用来声明这是表格的开始，并负责设定 table标记 说 明 标记/属性 （二）用表格制作图3-2页面的上部分内容，如下图 设定表格内文字与表格框线之间的间距。属性值为数值，数值越大，表格内文字与表格框线的间距越大 Cellpadding 用来设定表格外框的宽度。属性值可用数值表示，数值越大表示框线愈粗。Border默认值为1，因此table标记内出现border和border=“1”的意义是相同的。若省略border或是设border=“0”表示将表格的外框隐藏不显示 Border属性 设定表格的背景图片 Background 设定表格高度 Height 设定表格宽度 Width 行的文字垂直对齐方式。语法：tr valign=top|middle|bottom Valign 行的文字水平对齐方式。语法：tr align=left｜center|right Align 设置表格内边框的颜色。语法：tr bordercolor=“颜色” Bgcolor 设定表格内框线宽度，属性值为数值，数值越大，内框线越宽 Cellspacing 2、制作一个一行三列的表格 （1）格式如下： table border=1 tr td /td td /td td /td /tr /table （2）在表格中加入属性 代码如下： table cellSpacing=1 cellPadding=0 width=100% bgColor=#ff9933 border=0 tr td background=index_show.files/eshop_bar01_Y.gif height=25 table cellSpacing=0 cellPadding=0 width=100% border=0 trtd align=middle width=30img src=index_show.files/eshop_list02_Y.gif /td tdfont color=#ff6600今日推荐/font/td td align=rightfont color=#ff6600gt;gt;/font a href=# target=_blankfont color=#ff6600更多/font/a/td td width=10/td /tr /table /td /tr /table （3）效果如图3-3所示： （4）知识点讲解 cellSpacing=1：设定表格内框线宽度为1； cellPadding=0：设定表格内文字与表格框线之间的间距为0