湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目十三HTML中表格的制作(二) 【教学内容】 讲解HML中制作表格嵌套、叠加及表格在网页设计中的应用 【教学目的】 使学生掌握表格嵌套及叠加操作 【教学重点】 表格中嵌套操作及其应用 【教学难点】 理解表格嵌套实现的基本思想 【教学方式】 案例分析式、项目教学 【教学参考】 1.<< JavaScript入门与提高〉杨浩著 清华大学出版社 2.< Internet网页工场〉 Wittime工作室重庆出版社 3.< JavaScript从入门到精通>〉 电脑报社出版 4.HIML网页制作教程材义语编著铁道出版社 5、HIML基础与实例程耀编著电子工业出版社 【新课】 表格嵌套操作 例1:先设计如下表格
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目十三 HTML 中表格的制作(二) 【教学内容】 讲解 HTML 中制作表格嵌套、叠加及表格在网页设计中的应用 【教学目的】 使学生掌握表格嵌套及叠加操作 【教学重点】 表格中嵌套操作及其应用 【教学难点】 理解表格嵌套实现的基本思想 【教学方式】 案例分析式、项目教学 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<Internet 网页工场>> Wittime 工作室 重庆出版社 3．<<JavaScript 从入门到精通>> 电脑报社出版 4．HTML 网页制作教程 材义语编著 铁道出版社 5、HTML 基础与实例 程耀编著 电子工业出版社 【新课】 一、表格嵌套操作 例 1：先设计如下表格：
湖北职晚计算机科学与技术糸理论课教案一《网页设计》 表格制作一 icrosoft Internet Exp1orer 文件q)编①)查着收)工具江)帮助①D ⊙·国回的搬索☆收夹的媒体的·四·□“ 他址Q)6 FrontPage\zanp1ls%s!htn 转到练” 完毕 <HTML> <Head> < title>表格制作 title〉 </head> <body bgcolor=oOeeff> < center>表格例子 <table border=l width=300 align=center> <td align=center>1</td> </tr> height=60 align=center>2</td </tr> /table> </body < /html> 例2:设计如下表格
湖北职院计算机科学与技术系理论课教案—《网页设计》 <HTML> <Head> <title>表格制作</title> </head> <body bgcolor=00eeff> <center>表格例子 <table border=1 width=300 align=center> <tr> <td align=center>1</td> </tr> <tr> <td height=60 align=center>2</td> </tr> </table> </body> </html> 例 2：设计如下表格：
湖北职晚计算机科学与技术糸理论课教案一《网页设计》 表格制作 文件吧)辋①)查看①收窳)工只①)帮助① O后·冈必搜素次收椒的媒体,品圈·□当 转到链 表格例子 B 我的电脑 mIcrosoft,a11-M,表格作-”,-记事?以4 比较例1和例2的两个表格,可以看出,将例1中第二行中的单元格用一个表格来 代替,就得到了例2中的表格。这就是实现表格嵌套的基本思想。 <HTML <Head> < title>表格制作</ title <body bgcolor=00eeff> < center>表格例子 <table border=l width=300 align=center> <tr> <td align=center>1</td> </tr> <tr> <td> <table border=l width=100%> <tdA</td> < td colspan=2>B</td〉 </tr>
湖北职院计算机科学与技术系理论课教案—《网页设计》 比较例 1 和例 2 的两个表格，可以看出，将例 1 中第二行中的单元格用一个表格来 代替，就得到了例 2 中的表格。这就是实现表格嵌套的基本思想。 <HTML> <Head> <title>表格制作</title> </head> <body bgcolor=00eeff> <center>表格例子 <table border=1 width=300 align=center> <tr> <td align=center>1</td> </tr> <tr> <td> <table border=1 width=100%> <tr> <td>A</td> <td colspan=2>B</td> </tr>
湖北职院计算机科学与技术糸理论课教案一《网页设计》 <td>C</td> <td>D</td> <td>E</td> </tr> </table> </td> </table> </body> </html> 表格应用举例 例3.设计如下表格 表新材作一任工m 文件)编牺)查看心)收0)工具叮)帮助Q 后退·凶回必魏索☆ 灰的媒体 .1 1我的电脑 金表格術作-M <HTML> <Head> < title>表格制作</ title </head> <body bgcolor=ffoOee> < center>< font face=隶书 color= yellow size=5)表格嵌套</font〉/ center> <table border=l width=600 align=center>
湖北职院计算机科学与技术系理论课教案—《网页设计》 <tr> <td>C</td> <td>D</td> <td>E</td> </tr> </table> </td> </tr> </table> </body> </html> 二、表格应用举例 例 3．设计如下表格： <HTML> <Head> <title>表格制作</title> </head> <body bgcolor=ff00ee> <center><font face=隶书 color=yellow size=5>表格嵌套</font></center> <table border=1 width=600 align=center>
湖北职晚计算机科学与技术理论课教案一《网页设计》 <td rowspan=2 width=30%>2</td> <td> <table border=l width=100%> <tr> <td>a/td> <td rows 2>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td </tr> <td>f</td> <td>g</td> <td>h</td> <tr> /table> </td> </tr> <td>6</td </tr> /table> </body> </html> 例4.设计课程表
湖北职院计算机科学与技术系理论课教案—《网页设计》 <tr> <td rowspan=2 width=30%>2</td> <td> <table border=1 width=100%> <tr> <td>a</td> <td rowspan=2>b</td> <td>c</td> </tr> <tr> <td>d</td> <td>e</td> </tr> <tr> <td>f</td> <td>g</td> <td>h</td> <tr> </table> </td> </tr> <tr> <td>6</td> </tr> </table> </body> </html> 例 4．设计课程表