第3章
表格和框架
主要内容
. 在网页中使用Table
. 在网页中使用FrameSet
. 在网页中使用IFrame
1. 在网页中使用表格
表格在网页制作中主要的作用是用来描述具有二维结构的数据。包括的标签有<table>、<thead>、<tbody>、<tfoot>、<tr>、<td>。
. 一个简单的表格
代码演示：在网页插入表格
<table width="300" border="1"> ①
<thead> ②
<tr> ③
<td>this text is in the thead.</td> ④
</tr>
</thead>
<tbody> ⑤
<tr>
<td>this text is in the tbody.</td>
</tr>
</tbody>
<tfoot> ⑥
<tr>
<td>this text is in the table footer.</td>
</tr>
</tfoot>
</table>
代码解析：
① <table>标签用于定义一个表格。一个表格必须包含至少一个横行组，每一个横行组被分成三个部分：头、主干、尾。头和尾是可选的。<thead>元素定义头，<tfoot>元素定义尾，<tbody>元素则定义主干。
② <thead>标签元素定义头。
③ <tr> 标签用于定义一行。
④ <td> 标签用于定义一列。<td> 也叫做单元格，必须放在<tr>中。
⑤ <tbody>元素则定义主干。
⑥ <tfoot>元素定义尾。
运行效果如图1所示。
图1 简单的表格
2. Table的属性
. 表格的边框（border）
border属性表示表格的边框。
代码演示：表格的Border
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格的边框</title>
</head>
<body>
<table width="200" border="1"> ①
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
代码解析：
① border="n"，n是一个数字，单位是像素， 当n = 0时表示表格没有边框，当n >
0 时表示表格有边框，边框的宽度是n像素。运行效果如图2所示。
图2 表格的边框
. 表格的宽和高（width和height）
width属性表示表格的宽度，height属性表示表格的高度。
代码演示：表格的width和height
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格的宽和高</title>
</head>
<body>
<table width="200" height="100" border="1"> ①
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
代码解析：
① <table width=n或m%> <table height=n 或 m%> ，n代表一个数值，单位为像素（px）,m代表0-100的数，即0%-100%，这个百分比是相对于表格所在的容器的百分比。运行结果如图3所示，表格的宽度是200px ，高度是100px。
图3 表格的宽和高
. 表格的对齐（Align）
Align属性表示表格的对齐方式。
代码演示：表格的Align
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格的对齐</title>
</head>
<body>
<table width="200" height="100" border="1" align="center"> ①
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
代码解析：
① align表示表格在水平方向上的对齐方式，有三个值 left、center、right，分别表示居左对齐、居中对齐和居右对齐，省略align时是居左对齐。这个例子中align="center"，是居中对齐，如图4所示。
图4 表格的对齐
. 表格的背景色（Bgcolor）和背景图像（Background）
gcolor属性表示表格的背景颜色，Background属性表示表格的背景图像。
代码演示：表格的Bgcolor和 Background
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格的背景色和背景图像</title>
</head>
<body>
<table width="200" background="bg.jpg" bgcolor="#CCCCCC">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
代码解析：
① bgcolor表示背景色，background表示背景图像，当两者同时使用时背景图像会遮住背景色，Background的背景图像会平铺整个表格，类似于Body的背景图像效果，背景图像的路径建议使用相对路径。
. 表格的填充和边距（Cellspacing 和 Cellpadding）
Cellpadding表示表格的边距，Cellspacing表示表格的间距。边距是指单元格内的元素距离单元格边缘的距离，间距是指单元格与单元格之间的距离，如图5所示。
代码演示：表格的Cellspacing和 Cellpadding
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格的边距和间距</title>
</head>
<body>
<table width="300" border="1" cellpadding="10" cellspacing="10"> ①
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
</html>
代码解析：
① cellpadding="10" 表示边距为10 px，cellspacing="10"表示间距为10 px，如果不设置cellpadding和cellspacing ，它们的默认值是2px。
图 5 表格的边距（cellpadding）和填充（cellspacing）
. 表格的嵌套
表格的嵌套是指将一个表格放在另外一个表格的单元格中。
代码演示：表格的嵌套
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格的嵌套</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td> </td>
<td>
<table width="100" border="1" align="center"> ①
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
代码解析：
① 第一个表格是一行两列，第二个表格也是一行两列。在第一个表格的第一行的第二列中嵌套了第二个表格，如图6所示。
属性名 属性值 功能
Border
数字（单位像素）
表格边框
Width
数字（单位像素）
表格宽度
Height
数字（单位像素）
表格高度
Align
left center right (左中右)
表格对齐
Bgcolor
颜色
表格的背景色
Background
图片
表格的背景图像
Cellpadding
数字（单位像素）
文字到单元格边框的距离
Cellspacing
数字（单位像素）
单元格与单元格的距离
表1 <table>的属性
图6 表格的嵌套
3. TR的属性
. 行的高度(height)和背景色(bgcolor)
代码演示：<tr>的Height和bgcolor
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格的行高和背景色</title>
</head>
<body>
<table width="300" border="1">
<tr height="30" bgcolor="#CCCCCC"> ①
<td> </td>
<td> </td>
</tr>
<tr height="40" bgcolor="#999999">
<td> </td>
<td> </td>
</tr>
<tr height="50" bgcolor="#666666">
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
代码解析：
① <tr height="n"> 表示行的高度，单位是像素。当设置行高时这一行的所有列都与行高相同。<tr bgcolor="颜色值"> 表示这一行的背景色。本例中第一行的高度是30px,背景色是"#CCCCCC"，第二行的高度是40px ，背景色是"#999999"，第三行的高度是50px，背景色是"#666666"，如图7所示。
图7 行的高度和背景色
4. TD的属性
. 单元格的宽和高（Width和Height）
代码演示：单元格的width和height
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单元格的宽和高</title>
</head>
<body>
<table width="300" border="1" cellpadding="2" cellspacing="2" bgcolor="#CCCCCC" > ①
<tr height="20"> ②
<td width="100" height="20"> </td> ③
<td width="100" height="30"> </td> ④
<td width="100" height="40"> </td> ⑤
</tr>
</table>
</body>
</html>
代码解析：
运行的结果如图9所示。
① 表格的总宽度是300 px。
② 第一行的高度设置为20px，包括三列。
③ 第一个单元格的宽度为100 px，高度是20 px。
④ 第二个单元格的宽度为100 px，高度是30 px。
⑤ 第三个单元格的宽度为100 px，高度是40 px。
如果行设置了高度，行中的列也设置了高度，那么行的实际高度是行和列中高度最高的。这个例子中行的高度是第三个单元格设置的40px。
表格的总宽度设置为300px，每一列的宽度设置为100px，那么三列之和与表格总宽度是否相等呢？如图8所示，在Dreamweaver中显示表格的宽度数据，每一列设置的值均为100px，而实际上第一列和第二列的宽度是90px，第三列的实际宽度是92px。这是因为表格设置了border="1" cellpadding="2" cellspacing="2"属性，他们占用了表格的一部分宽度。
图8 表格与单元格宽度设置值与实际值
图9 单元格的宽和高
如果表格中所有列宽度之和不等于表格总宽度，那么每一列都将按比例分配总表格的宽度。例如：
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100"> </td>
<td width="100"> </td>
</tr>
</table>
表格总宽度300 px，共有两列，每一列设置宽100 px，实际上每一列的宽度为150px。
. 单元格的水平和垂直对齐(Align和Valign)
Align属性表示水平方向的对齐，Valign表示垂直方向的对齐。
代码演示：单元格的Align和Valign
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单元格的水平和垂直对齐</title>
</head>
<body>
<table width="300" border="1" cellspacing="0" cellpadding="0">
<tr height="50">
<td valign="top">上</td> ①
<td align="left">左</td> ②
</tr>
<tr height="50">
<td>中</td>
<td align="center">中</td>
</tr>
<tr height="50">
<td valign="bottom">下</td>
<td align="right">右</td>
</tr>
</table>
</body>
</html>
代码解析：
① align有三个值left、center、right，分别表示左、中、右。
② valign 有三个值top、middle、bottom，分别表示上、中、下。
运行的结果如图10所示。
图10 单元格的水平和垂直对齐
. 单元格的背景色（bgcolor）
代码演示：单元格的bgcolor
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单元格的背景色</title>
</head>
<body>
<table width="300" border="0" bgcolor="#CCCCCC"> ①
<tr bgcolor="#999999"> ②
<td> </td>
<td bgcolor="#666666"> </td> ③
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
代码解析：
① 表格的背景色为"#CCCCCC"
② 第一行的背景色为"#999999"
③ 第一行第二列的背景色为"#666666"
运行的结果如图11所示。
从运行结果可以看出单元格的背景色会遮住行的背景色，行得背景色会遮住表格的背景色。
图11 单元格的背景色
. 单元格跨行(rowspan)属性
代码演示：单元格的rowspan
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单元格跨行</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td rowspan="2"> </td> ①
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
代码解析：
① <td rowspan="n"> 中n是一个整数，表示这个单元格在垂直方向跨的行数。
运行的结果如图12所示。
图12 单元格跨行
. 单元格跨列（colspan）属性
代码演示：单元格的colspan
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单元格跨列</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td colspan="2" align="center">1001班平均成绩</td> ①
</tr>
<tr>
<td align="center">笔试</td>
<td align="center">机试</td>
</tr>
<tr>
<td align="center">68</td>
<td align="center">72</td>
</tr>
</table>
</body>
</html>
代码解析：
① <td colspan="n"> 中n是一个整数，表示这个单元格在水平方向跨的列数。
运行的结果如图13所示。
图13 单元格跨列
属性名 属性值 功能
width
数字（单位像素）
单元格的高度
height
数字（单位像素）
单元格宽度
align
left center right（左中右）
单元格水平对齐方式
valign
top middle buttom（上中下）
单元格垂直对齐方式
bgcolor
颜色
单元格的背景色
rowspan
数字
垂直方向跨行
colspan
数字
水平方向跨列
表3 <td>的属性
5. 在网页中使用FrameSet
框架(FrameSet)用于将一个浏览器窗口分割成几个子窗口，每个子窗口显示一个网页文件，并在子窗口之间实现导航。框架的建立利用<Frameset>标签和<Frame>标签。
. 使用<Frameset>制作框架网页
我们来制作一个框架的案例，在这个案例中需要创建4个文件，分别是FrameSet.html、Left.html、Sanzijing.html、Baijiaxing.html。运行FrameSet.html文件，运行结果如图14所示。当点击“三字经”时，右侧子窗口显示Sanzijing.html文件，当点击“百家姓”时，右侧子窗口显示Baijiaxing.html文件。
图14 框架导航
. FrameSet.html文件代码
代码演示：FrameSet.html
<html>
<head>
<title>框架</title>
</head>
<frameset rows="*" cols="150,*" framespacing="0"
frameborder="no" border="0"> ①
<frame src="Left.html" name="leftFrame" scrolling="No"
noresize="noresize" id="leftFrame" title="leftFrame" /> ②
<frame src="Sanzijing.html" name="mainFrame" id="mainFrame"
title="mainFrame" /> ③
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
代码解析：
<Frameset>标签用于将浏览器分割成多个窗口，分割有两种方式，一种是水平分割使用rows属性来实现，另一种是垂直分割，使用cols属性来实现。
① <frameset rows="n1,n2,…"，rows有几个值就表示将浏览器窗口分成了几行。
. n1表示第一行的高度，以像素为单位。
. n2表示第二行的高度，以像素为单位。
. …
. 星号"*"表示分配给前面所有窗口后剩下的高度，例如，<frameset rows="20%,30%,*">,这里的 "*" 就代表第三行的高度50%。<frameset cols="n1,n2,…">，cols的用法与rows完全相同。在Frameset.html文件中，<Frameset>将浏览器窗口分割成一行两列。
属性名 属性值 功能
rows
以，分隔的数字或百分比
垂直方向分割的窗口
cols
以，分隔的数字或百分比
水平方向分割的窗口
frameborder
yes 或 no
框架是否现实边框
border
框架边框的宽度
框架边框的宽度，需要设置frameborder="yes"
表4 <Frameset>标签的属性
② 这个<frame>标签表示左侧子窗口，src属性表示这个子窗口显示Left.html文件，Name属性表示窗口名称为” leftFrame”。
③ 这个<frame>标签表示右侧子窗口，src属性表示这个子窗口显示Sanzijing.html文件，
Name属性表示窗口名称为” mainFrame”。
属性名 属性值 功能
src
网页文件的路径和文件名
子窗口显示的网页文件
name
字符串
子窗口的名称
表5 <Frame>标签的属性
. Left.html文件代码
代码演示：Left.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body bgcolor="#CCCCCC">
<p><a href="Sanzijing.html" target="mainFrame">三字经</a></p> ①
<p><a href="Baijiaxing.html" target="mainFrame">百家姓</a> </p> ②
<p><a href="http://www.sohu.com" target="_top">访问搜狐网站</a> ③ </p>
</body>
</html>
代码解析：
① target="mainFrame"表示当点击“三字经”时，在名称为"mainFrame"的窗口中打开Sanzijing.html网页文件，实现了框架导航。
② target="mainFrame"表示当点击“百家姓”时，在名称为"mainFrame"的窗口中打开Baijiaxing.html网页文件，实现了框架导航。
② target="_top "表示当点击“访问搜狐网站”时，取消框架，在整个浏览器窗口中打开http://www.sohu.com网址。
. Sanzijing.html文件代码
代码演示：Sanzijing.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<pre>
三字经
人之初,性本善。
性相近,习相远。
苟不教,性乃迁。
教之道,贵以专。
昔孟母,择邻处。
子不学,断机杼。
</pre>
</body>
</htm
. Baijiaxing.html文件代码
代码演示：Baijiaxing.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<pre>
百家姓
赵钱孙李周吴郑王
冯陈褚卫蒋沈韩杨
朱秦尤许何吕施张
孔曹严华金魏陶姜
...
</pre>
</body>
</html>
6. 在网页中使用Iframe
<Frameset>标签是将浏览器窗口分隔成几个子窗口，子窗口的大小是由框架的高度和
宽度属性来设置的，不够灵活。这里介绍<Iframe>标签，它可以自由的控制窗口大小，可以配置表格在网页中的任何位置插入窗口。
案例2：使用<IFrame>
在这个案例中要制作两个文件，IFrame.html和Ad.html，在IFrame.html中添加一个两行一列的表格，将Ad.html文件显示在iFrame.html的第二行中。
代码演示：IFrame.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title><IFrame></title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr height="100">
<td bgcolor="#CCCCCC"><IFrame></td> ①
</tr>
<tr height="150">
<td>
<iframe
width="100%"
height="100%"
name="InnerFrame"
frameborder="0"
src="ad.html"
scrolling="no"
marginheight="0"
marginwidth="0"> ②
</iframe>
</td>
</tr>
</table>
</body>
</html>
代码解析：
① 表格的第一行设置了背景色，单元格中显示<IFrame>。
② 在第二行中嵌入了<IFrame>框架，width和height属性设置了框架的宽和高，与它所在的容器（第二行的单元格）的宽和高相同，name属性设置框架的名称为“InnerFrame”,frameborder设置框架没有边框，src设置框架中显示的文件是Ad.html，scrolling设置框架没有滚动条，marginheight和marginwidth设置框架的上下边距和左右边距为0。
运行后如图15所示。
属性名 属性值 功能
width
数字（以像素为单位）
框架的宽度
height
数字（以像素为单位）
框架的高度
name
字符串
框架的名称
frameborder
0或1
框架的边框，0没边框，1有边框
src
网页文件路径和文件名
框架中打开的网页文件
scrolling
Yes或No
框架滚动条，Yes有滚动条，No没有滚动条
marginheight
数字（以像素为单位）
框架的左右边距
marginwidth
数字（以像素为单位）
框架的上下边距
表6 IFrame的属性
图15 <IFrame>
7. 本章总结
. 表格用于定位网页元素，包括<table><tr><td>三个标签。
. <table>的属性有border, width, height, align, bgcolor, background, cellspacing, cellpadding。
. <tr>的属性有height, bgcolor。
. <td>的属性有 width, height, align, valign, bgcolor, rowspan, colspan。
. 框架实现网页的导航，通过<frameset>和<frame>标签实现。
. <frameset>的属性有rows,cols,frameborder,border。
. <frame>的属性有src,name。
. <iframe>实现嵌入式框架，使用起来更灵活。
. <iframe>的属性有width, height, name, frameborder, src, scrolling, marginheight, marginwidth。
8. 本章练习
1. 单元格中跨行和跨列的属性是什么
2. 什么是表格的边距和间距。
3. 当同时设置表格、行、单元格的背景色时，网页显示谁的背景色。
4. 框架的作用是什么。
5. <frameset>与<iframe>有什么区别。
表格和框架
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
[转载]慎用标签 提交表单 [IE6无法提交表单][事件冲突]
我們都知道可以使用 [form].submit(); 來動態提交表單,但使用點擊<a/>標籤來提交表單, 會出現什麼情況呢?我們都知道, <a/>有個