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

Presentation on theme: "教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页."— Presentation transcript:

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

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

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

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

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

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

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

8 （二）用表格制作图3-2页面的上部分内容，如下图
1、表格的建立 　 语法说明如下表： 标记/属性 说 明 <table>标记 <table>用来声明这是表格的开始，并负责设定 <tr>标记 Tr是table row缩写，用来声明这是表格中水平线的开 始。</tr>可省略。 <td>标记 Td是table data的缩写，用来声明这是字段数据的开始， 在储存单元内的数据预设靠左且置中。</td>可略。 <th>标记 Th是table header的缩写，用来定义表格的字段名称，在 标记内的文字预设水平对齐与垂直对齐皆为居中对齐且 字体加粗。在<th>标记内亦可加入align和valign两个属 性来控制该字段内的对齐方式，有效范围只限该栏的数 据。若在<tr>内，此两属性对该行中的所有字段均有效。

9 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”表示将表格的外框隐藏不显示

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

11 <td background=index_show.files/eshop_bar01_Y.gif height=25>
（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>>></font> <a href="#" target=_blank><font color=#ff6600>更多</font></a></td> <td width=10></td> </tr>

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

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

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

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

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

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

18 <td><font color=#333333>市场价格：</font><font
<tr> <td height=6></td></tr> <td background=index_show.files/line_h_H02.gif height=1></td></tr> <td height=2></td></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> <td><font color=#333333>市场价格：</font><font color=#ff0000><STRIKE>1085</strike></font> <font color=#999999>(元/盒)</font></td></tr>

19 <tr> <td height=2></td></tr> <td background=index_show.files/line_h_H02.gif height=1></td></tr> <td height=6></td></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>

20 效果如图：

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

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

23

24 谢 谢 ！