html-7 表格的制作2.docVIP

教学项目七 HTML中表格的制作(二) 【教学内容】 讲解HTML中制作表格嵌套、叠加及表格在网页设计中的应用 【教学目的】 使学生掌握表格嵌套及叠加操作 【教学重点】 表格中嵌套操作及其应用 【教学难点】 理解表格嵌套实现的基本思想 【教学方式】 案例分析式、项目教学 【教学参考】 1．HTML网页制作教程 材义语编著 铁道出版社 2、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=400 tr td width=100 rowspan=2a/td td colspan=2b/td /tr tr td width=150e/td td width=150f/td /