【网页设计教案】HTML中表格的制作二.docVIP

教学项目十三 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=center1/td /tr tr td height=60 align=center2/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=center1/td /tr tr td table border=1 width=100% tr tdA/td td colspan=2B/td /tr tr tdC/td tdD/td tdE/td /tr /table /td /tr /table /body /html 表格应用举例 例3．设计如下表格： HTML Head title表格制作/title /head body bgcolor=ff00ee centerfont 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 tda/td td rowspan=2b/td tdc/td /tr tr tdd/td tde/td /tr tr tdf/td tdg/td tdh/td tr /table /td /tr tr td6/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 tdnbsp;/td td星期一/td td星期二/td td星期三/td td星期四/td td星期五/td tr td1--2节/td tdASP/td td英语/td tdVB/td td法律基础/td tdSQL/td tr td3--4节/td tdsql/td tdFLASH/td tdASP/td td英语/td tdFLASH/td tr td5--6节/td td实训/td td实训/td tdnbsp;/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=2001/td td rowspan=2 width=1002/td td width=1003/td /tr tr td4/td td6/td /tr tr td7/td td8/td td9/td /tr /table table border=1 width