教学项目十二 HTML中表格的制作
【 教学内容 】
讲解 HTML中制作表格的标志
【 教学目的 】
使学生掌握简单表格的制作
【 教学重点 】
表格中单元格的合并操作
【 教学难点 】
理解属性 rowspan与 colspan的含义
【 教学方式 】
案例分析式、项目教学
【 教学参考 】
1,<<JavaScript 入门与提高 >> 杨浩著 清华大学出版社
2,<<Internet 网页工场 >> Wittime工作室 重庆出版社
3,<<JavaScript从入门到精通 >> 电脑报社出版
4,HTML网页制作教程 材义语编著 铁道出版社
5,HTML基础与实例 程耀编著 电子工业出版社
【 新课 】
一, 表格基本标志
(1)<table></table>
(2) <tr></tr>
(3) <td></td>
(4)<th></th>
<table></table>用来创建一个表格框架
<tr></tr>创建表格的一行
<td></td>创建表格一行中的一个单元格
它们的对应关系如下,
<table>
<tr>
<td>第一行第一列 </td>
<td>第一行第二列 </td>
<td>第一行第三列 </td>
<td>第一行第四列 </td>
</tr>
</table>
<th></th>
用于定义表格头
例 1 在网页中制作表格,
<HTML>
<Head>
<title>表格制作 </title>
</head>
<body bgcolor=00eeff>
<center>表格例子
<table border=1 width=300 align=center>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>F</td>
</tr>
<tr>
<td>F</td>
<td>F</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>F</td>
<td>F</td>
</tr>
</table>
</body>
</html>
二, <table></table>标志中配合使用的属性
1,border 设置表格边框的宽度
2,bgcolor 设置表格背景颜色
3,background 设置表格背景图片
4,width 设置表格宽度
5,height 设置表格高度
6,cellspacing 设置表格内框线宽度
7,cellpadding 设置表格内文字与表格边框线的间
距
8,align 设置表格水平对齐方式
9,valign 设置表格垂直对齐方式
10.bordercolor 设置表格边框颜色
11.bordercolorlight 设置表格明亮边框颜色
12.bordercolordark 设置表格暗边框颜色
例二, 制作乘法口诀表
<html>
<Head>
<title>表格制作 </title>
</head>
<body background=17.gif>
<center>乘法口诀表 </center>
<table border=2 align=center cellspacing=6
cellpadding=10 bordercolor=#ff0000 bordercolordark=#00ff00>
<tr>
<td>6&times;6=36</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>6&times;7=42</td>
<td>7&times;7=49</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>6&times;8=48</td>
<td>7&times;8=56</td>
<td>8&times;8=64</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>6&times;9=54</td>
<td>7&times;9=63</td>
<td>8&times;9=72</td>
<td>9&times;9=81</td>
</tr>
</table>
</body>
</html>
二, 表格标题的设定
语法,
<caption valign=垂直对齐 align=水平对齐 >标题 </caption>
说明,
valign=top 标题置于表格上方
valign=bottom 标题置于表格下方
align=left 居左
align=right 居右
align=center 居中
三, 表格中单元格的合并
在 <td></td>或 <th></th>标志中加入属性 colspan 和 rowspan,可以
实现单元格的合并
colspan,指定单元格合并占用的列数
rowspan,指定单元格合并占用的行数
例三：制作单元格合并的表格
<html>
<body>
<table border=1 width=300 align=center background=14.gif>
<caption valign=top align=center>表格中单元格合并举例 </caption>
<tr>
<th colspan=4 align=center>示例 </th>
</tr>
<tr>
<td>1</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td rowspan=2 colspan=2 align=center><font size=5>2</font></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td rowspan=3 colspan=3 align=center>
<font size=6>3</font></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<caption valign=bottom align=right>制表日期,03/12/02</caption>
</table>
</body>
</html>
【 课后小结 】
本次课介绍了表格标志及相关属性, 表格在网页设计中应用广泛, 熟练
掌握表格的基本标志及配合使用的属性的意义, 是灵活运用表格的基础 。