教学项目十三 HTML中表格的制作(二) 【教学内容】 讲解HTML中制作表格嵌套、叠加及表格在网页设计中的应用 【教学目的】 使学生掌握表格嵌套及叠加操作 【教学重点】 表格中嵌套操作及其应用 【教学难点】 理解表格嵌套实现的基本思想 【教学方式】 案例分析式、项目教学 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<Internet 网页工场>> Wittime工作室 重庆出版社 3．<<JavaScript从入门到精通>> 电脑报社出版 4．HTML网页制作教程 材义语编著 铁道出版社 5、HTML基础与实例 程耀编著 电子工业出版社 【新课】 表格嵌套操作 例1：先设计如下表格：  <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：设计如下表格：  比较例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> <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> <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．设计课程表  <html> <body bgcolor=#00ffee> <table border="1" background=17.gif align=center> <caption valign=top align=center>课程表</caption> <tr> <td>&nbsp;</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <tr> <td>1--2节</td> <td>ASP</td> <td>英语</td> <td>VB</td> <td>法律基础</td> <td>SQL</td> <tr> <td>3--4节</td> <td>sql</td> <td>FLASH</td> <td>ASP</td> <td>英语</td> <td>FLASH</td> <tr> <td>5--6节</td> <td>实训</td> <td>实训</td> <td>&nbsp;</td> <td>实训</td> <td>实训</td> <caption valign=bottom align=right>制表时间 2月3日 </table> </body> </html> 表格叠加 例5．设计如下表格：  设计分析： 当网页中出现表格各行的宽度相同，不同行中列宽不同时，此时使用单元格合并方式制作表格会很复杂。在这种情况下，可以使用表格叠加来实现。 <HTML> <Head> <title>表格制作</title> </head> <body bgcolor=00eeff > <center>表格叠加 <table border=1 width=400> <tr> <td width=200>1</td> <td rowspan=2 width=100>2</td> <td width=100>3</td> </tr> <tr> <td>4</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> <table border=1 width=400> <tr> <td width=100 rowspan=2>a</td> <td colspan=2>b</td> </tr> <tr> <td width=150>e</td> <td width=150>f</td> </tr> <tr> <td width=100>g</td> <td width=150>h</td> <td width=150>i</td> </tr> </table> </body> </html> 【课后小结】 本节介绍表格的叠加、嵌套及其应用。表格的嵌套是表格制作中的一个难点，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内嵌表格代替。