湖北职院计科系

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

教学内容1 、演示并讲解用表格布局制作的网页2 、用表格制作网页

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

教学目的1 、掌握表格的插入2 、掌握单元格的相关操作3 、用表格布局制作一个网页4 、表格嵌套与叠加

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

教学重点1 、表格的插入2 、单元格的相关操作

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

教学难点1 、表格的插入2 、单元格的相关操作3 、用表格布局制作一个网页

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

引言：　 在网页设计中适当的使用表格将不同性质和部分加以区分，不但能使整个网页看起来整齐而且可读性增高。下面我们介绍表格的各种属性设定、如何在表格加入文字、图片等对象、表格标题以及利用表格来配置版面。

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

（一）演示并讲解用表格布局制作的网页1 、演示学完 HTML 后要完成的如图 3-1 中国茶吧网站中的网上商城页面。

图 3-1 中国茶吧网站中网上商城页面

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

2 、演示本次课要完成的用表格制作如图 3-2 的页面内容。

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

1 、表格的建立　 语法说明如下表：标记 /属性 说 明<table> 标记 <table> 用来声明这是表格的开始，并负责设定<tr> 标记 Tr 是 table row 缩写，用来声明这是表格中水平线的开始。 </tr> 可省略。<td> 标记 Td 是 table data 的缩写，用来声明这是字段数据的开始，在储存单元内的数据预设靠左且置中。 </td> 可略。

<th> 标记

Th 是 table header 的缩写，用来定义表格的字段名称，在标记内的文字预设水平对齐与垂直对齐皆为居中对齐且字体加粗。在 <th> 标记内亦可加入 align 和 valign 两个属性来控制该字段内的对齐方式，有效范围只限该栏的数据。若在 <tr> 内，此两属性对该行中的所有字段均有效。

（二）用表格制作图 3-2 页面的上部分内容，如下图

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

Cellpadding 设定表格内文字与表格框线之间的间距。属性值为数值，数值越大，表格内文字与表格框线的间距越大Cellspacing 设定表格内框线宽度，属性值为数值，数值越大，内框线越宽Bgcolor 设置表格内边框的颜色。语法： <tr bordercolor=“ 颜色”>Align 行的文字水平对齐方式。语法： <tr align=left ｜ center|right>Valign 行的文字垂直对齐方式。语法： <tr valign=top|middle|bottom>Width 设定表格宽度Height 设定表格高度Background

设定表格的背景图片

Border 属性用来设定表格外框的宽度。属性值可用数值表示，数值越大表示框线愈粗。 Border 默认值为 1，因此 <table> 标记内出现 border 和 border=“1” 的意义是相同的。若省略 border或是设 border=“0” 表示将表格的外框隐藏不显示

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

2 、制作一个一行三列的表格 （ 1）格式如下：<table border=1><tr><td></td><td></td><td></td></tr></table>

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

（ 2 ）在表格中加入属性 代码如下：<table cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff9933 border=0><tr><td background=index_show.files/eshop_bar01_Y.gif height=25><table cellSpacing=0 cellPadding=0 width="100%" border=0><tr><td align=middle width=30><img src="index_show.files/eshop_list02_Y.gif" > </td><td><font color=#ff6600> 今日推荐 </font></td><td align=right><font color=#ff6600>&gt;&gt;</font><a href="#" target=_blank><font color=#ff6600> 更多 </font></a></td><td width=10></td></tr>

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

</table></td></tr></table>（ 3 ）效果如图 3-3 所示：

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

（ 4 ）知识点讲解cellSpacing=1 ：设定表格内框线宽度为 1；cellPadding=0 ：设定表格内文字与表格框线之间的间距为 0；bgColor=#ff9933 ：设定背景颜色为橙色，它是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果；border=“0”：表示将表格的外框隐藏不显示；Tr是 table row 缩写，用来声明这是表格中水平线的开始。

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

（三）制作下图所示的页面

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

语法：1 、表格的标题与表头　　大部分的表格都会在表格的上面加上标题文字，让人能够知道该表格的功用。在 HTML 中是通过 <caption> 标记来设定，语法： <caption valign=“value1” align=“value2”>tblname</caption>功能：当表格的标题或批注使用。1)<caption> 为成对标记，必须置于 <table> 标记范围内。2)Tblname参数代表该表格的标题名称。3)Valign 属性：用来设定标题位置，可以和 align 属性连用，value1 值如下：Top ：将标题置于表格的上方（默认值）。Bottom ：将标题置于表格的下方。

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

4)Align 属性：设定标题对齐方式，和 valign 属性一起连用，value2 值如下：Left ：将标题置于左方。Center ：将标题置于中央（默认值）。Right ：将标题置于右方。2 、跨行合并我们可在 <td> 或 <th> 标记中加入 colspan（栏展开）的属性来做储存单元的合并，这个属性可用来控制储存单元的数目。它表示该储存单元要占用栏的宽度。属性值用数字表示。3 、跨列合并我们可在 <td> 或 <th> 标记中加入 rowspan（列展开）的属性来做储存单元的合并，这个可用来控制储存单元的数目。表示该储存单元要占用列（储存单元）的高度。属性值用数字表示。

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

代码如下：<table cellSpacing=0 cellPadding=0 width="100%" border=0><tbody><tr><td background=index_show.files/eshop_shade02.gif height=5></td></tr><tr><td height=10></td></tr></tbody></table><table cellSpacing=0 cellPadding=0 border=0><tbody><tr><td><a href=“#" target=_blank><img height=120 alt=富贵吉祥 src="index_show.files/20066151584775663.jpg" width=160></A></td></tr>

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

<tr><td height=6></td></tr><tr><td background=index_show.files/line_h_H02.gif height=1></td></tr><tr><td height=2></td></tr><tr><tr><td><font color=#333333> 商城价格： </font><font color=#0000ff>651</FONT> <font color=#999999>(元 /盒 )</font></td></tr><td><font color=#333333>产品名称： </font><a title=富贵吉祥 href=“#" target=_blank><font class=bold color=#ff6600>富贵吉祥 </font></a></td></tr><tr><td><font color=#333333>市场价格： </font><font color=#ff0000><STRIKE>1085</strike></font> <font color=#999999>(元 /盒 )</font></td></tr>

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

<tr><td height=2></td></tr><tr><td background=index_show.files/line_h_H02.gif height=1></td></tr><tr><td height=6></td></tr><tr><td align=middle><a href=“#" target=_blank><IMG alt=购买该产品 src="index_show.files/eshop_buy01.gif" border=0></a></td></tr></tbody></table></td></tr><tr><td><img src="index_show.files/f0103.gif"></td></tr></tbody></tbody></td><td width=5></td><td width=180></td></tr></table>

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

效果如图：

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

【小结】　 最简单的表格仅包括行和列。任何表格都有三个基本要素：表行、表头和表项，每个要素都有自己的标签。表格是一行一行建立的，在每一行中填入该行每一列的表格数据。通过这次课我们对表格和单元格的属性有一定的的认识和了解，根据上述内容，我们再通过理论和实践相结合，多练习，多操作，对网页的制作中表格的操作有更深的理解。

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

【作业】 按实验内容完成网上的操作，完成实验报告，在实验报告中要求记录如下内容：1、表格的几种属性；2、用十六进制、英文单词写出六种颜色；3、根据上述所讲内容完成如图所示（截图）的页面。（素材在D:\yhf\ 项目三： HTML 表格与单元格标记的使用 \网上商城 \表格部分）页面为 D:\yhf\ 项目三： HTML 表格与单元格标记的使用 \网上商城 \表格部分 \index_show.html 的首页。

教学难点

教学内容

教学目的

教学重点

教学过程

项目三 HTML 表格与单元格标记的使用

上一页 下一页

谢 谢 ！