教学项目十三 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>
【 课后小结 】
本节介绍表格的叠加、嵌套及其应用。表格的嵌套是表格制作中的一个难点
，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用
内嵌表格代替。