湖北职业技术学院：《网页设计》理论课 教学项目十二 HTML中表格的制作

湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目十二HTML中表格的制作 【教学内容】 讲解HML中制作表格的标志 【教学目的】 使学生掌握简单表格的制作 【教学重点】 表格中单元格的合并操作 【教学难点】 理解属性 rowspan与 colspan的含义 【教学方式】 案例分析式、项目教学 【教学参考】 1.〉 电脑报社出版 4.HIML网页制作教程材义语编著铁道出版社 5、HIML基础与实例程耀编著电子工业出版社 【新课】 表格基本标志 (1/table> 2) (3) (4) 用来创建—个表格框架 tr创建表格的一行 创建表格一行中的一个单元格

湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目十二 HTML 中表格的制作 【教学内容】 讲解 HTML 中制作表格的标志 【教学目的】 使学生掌握简单表格的制作 【教学重点】 表格中单元格的合并操作 【教学难点】 理解属性 rowspan 与 colspan 的含义 【教学方式】 案例分析式、项目教学 【教学参考】 1．> 杨浩著 清华大学出版社 2．> Wittime 工作室 重庆出版社 3．> 电脑报社出版 4．HTML 网页制作教程 材义语编著 铁道出版社 5、HTML 基础与实例 程耀编著 电子工业出版社 【新课】 一、表格基本标志 (1) (2) (3) (4) 用来创建一个表格框架 创建表格的一行 创建表格一行中的一个单元格

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 它们的对应关系如下 第一行第一列/td 第一行第二列/td 第一行第四列/td K/table> 用于定义表格头 例1.在网页中制作表格: 表格制作一夏 icrosott Internet Explorer 文件)辑正)查看0收0)工具α)帮助Q ⊙:回必>搜收夹的媒体 表格例子 毕 表格制作 title〉

湖北职院计算机科学与技术系理论课教案—《网页设计》 它们的对应关系如下: 第一行第一列 第一行第二列 第一行第三列 第一行第四列 用于定义表格头 例1. 在网页中制作表格: 表格制作

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 表格例子 &nbsp: &nbsp: F F/td> F   /td> &nbsp: F/td> F /table> 标志中配合使用的属性 设置表格边框的宽度 2. bgcolor 设置表格背景颜色 3. background设置表格背景图片 4. width 设置表格宽度 5. height 设置表格高度 6. cellspaci 设置表格内框线宽度 7. cellpadding设置表格内文字与表格边框线的间距

湖北职院计算机科学与技术系理论课教案—《网页设计》 表格例子     F F F     F F 二、标志中配合使用的属性 1. border 设置表格边框的宽度 2. bgcolor 设置表格背景颜色 3. background 设置表格背景图片 4. width 设置表格宽度 5. height 设置表格高度 6. cellspacing 设置表格内框线宽度 7. cellpadding 设置表格内文字与表格边框线的间距

湖北职晚计算机科学与技术理论课教案一《网页设计》 8. ali 设置表格水平对齐方式 设置表格垂直对齐方式 10. bordercolor设置表格边框颜色 11. bordercolorlight设置表格明亮边框颜色 12. bordercolordark设置表格暗边框颜色 例二、制作乘法口诀表 文件)铜①)查着Q收)工具①帮助 后因图沿搜收夹的媒体的,·□ 址①)G: FrontPage\sanple112htm 转到链” 乘法口诀表 6xy=427×7=49 6×8=487×8=568×8=64 6×9547×96818×97219×年81 表格制作 title〉 乘法口诀表

湖北职院计算机科学与技术系理论课教案—《网页设计》 8. align 设置表格水平对齐方式 9. valign 设置表格垂直对齐方式 10.bordercolor 设置表格边框颜色 11.bordercolorlight 设置表格明亮边框颜色 12.bordercolordark 设置表格暗边框颜色 例二、制作乘法口诀表 表格制作 乘法口诀表

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 6&times: 6=36   &nbsp: &nbsp: 6&times: 7=42 7&times: 7=49    /td> 6&times: 8=487&times: 8=56 8&times: 8=64   6&times: 9=54 7&times: 9=63 8&times: 9=72/td> 9&times: 9=81 ) 表格标题的设定 语法 ption valign=垂直对齐 align=水平对齐>标题 caption 说明 valign=top标题置于表格上方

湖北职院计算机科学与技术系理论课教案—《网页设计》 6×6=36       6×7=42 7×7=49     6×8=48 7×8=56 8×8=64   6×9=54 7×9=63 8×9=72 9×9=81 二、表格标题的设定 语法： 标题 说明： valign=top 标题置于表格上方

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 valign= bottom标题置于表格下方 lign=eft居左 align= right居右 align= center居中 、表格中单元格的合并 在或标志中加入属性 colspan和 rowspan,可以实现单元格的合并 colspan:指定单元格合并占用的列数 rowspan:指定单元格合并占用的行数 例三:制作单元格合并的表格 文件吧)编辑①)查看Q收瘰)工具①)帮助Q ⊙后凶图哈户搜素收的媒体的,·□ Btt p)e]o: \FrontPace\sanpl16\new_pac._5,htn ∽转到链腰” 表格中单元格合并举例 示例 制表日期:03/12/02 也完毕 3我的电脑 表格中单元格合并举例</ caption

湖北职院计算机科学与技术系理论课教案—《网页设计》 valign=bottom 标题置于表格下方 align=left 居左 align=right 居右 align=center 居中 三、表格中单元格的合并 在或标志中加入属性 colspan 和 rowspan，可以实现单元格的合并 colspan: 指定单元格合并占用的列数 rowspan: 指定单元格合并占用的行数 例三：制作单元格合并的表格 表格中单元格合并举例

湖北职晚计算机科学与技术理论课教案一《网页设计》 示例/th> 1/td> &nbsp: &nbsp;&nbsp; &nbsp;font size=5>2 &nbsp; &nbsp; &nbsp; &nbsp; 3 &nbsp; &nbsp; 制表日期:03/12/02 K /table> 【课后小结】 本次课介绍了表格标志及相关属性,表格在网页设计中应用广泛,熟练掌握表格的基

湖北职院计算机科学与技术系理论课教案—《网页设计》 示例 1 &nbsp; &nbsp; &nbsp; &nbsp; 2 &nbsp; &nbsp; &nbsp; &nbsp; 3 &nbsp; &nbsp; 制表日期:03/12/02 【课后小结】 本次课介绍了表格标志及相关属性，表格在网页设计中应用广泛，熟练掌握表格的基

湖北职晚计算机科学与技术亲理论课教案一《网页设计》 本标志及配合使用的属性的意义,是灵活运用表格的基础

湖北职院计算机科学与技术系理论课教案—《网页设计》 本标志及配合使用的属性的意义，是灵活运用表格的基础