第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/>有個