HTML培訓課程-------Day02（表格和框架）
表格
在網頁中表格是一種經常使用到得設計結構，就像表格的內容中可以包含任何的數據，如文字、圖像、表單、超鏈接、表格等等，所有在HTML中可以使用的數據，都可以被設置在表格中，所以有關表格設置的標記與屬性也特別多。
通過本章節對表格的學習，需要掌握：1如何設置不同樣式的表格；2如何設置不規則表格；3如何運用表格進行頁面布局。
表格的基本格式
格式:
<table>
<tr>…
<th>… </th>
<th>… </th>
<th>… </th>
</tr>
<tr>
<td>… </td>
<td>… </td>
<td>… </td>
</tr>
</table>
功能: <table>…</table>用來聲明表格開始與結束.
<tr>…</tr>用來設置表格的行.
<th>…</th>用來設置表頭欄.
<td>…</td>用來設置數據欄.
<table>標簽下的屬性
屬性名稱 屬性值 說明
border 像素 設置表格的邊框
cellspacing 像素 絕對值，單元格之間的距離
百分比 相對值，單元格之間的距離
cellpadding 像素 絕對值，單元格內容與邊框之間的距離
百分比 相對值, 單元格內容與邊框之間的距離
width 像素 絕對值,像素表示表格寬度
百分比 相對值,百分比表表格寬度
height 像素 絕對值,像素表示表格高度
百分比 相對值,百分比表示表格高度
align left 表格居左(默認)
center 表格居中
right 表格居右
bgcolor 英文/十六 表格的背景顏色
background URL 表格的背景圖片
bordercolor 英文/十六 邊框的顏色
bordercolorlight 同上 邊框的亮色（IE支持）
bordercolordark 同上 邊框的暗色
<tr><th><td>標簽下的常用屬性
屬性名稱 屬性值 說明
width 像素 絕對設置,以像素值設置寬 百分比 相對設置,以百分比設置寬
height 像素 絕對設置,以像素值設置高
百分比 相對設置,以百分比設置寬
bgcolor 英文/十六 數據欄的顏色設置
align(水平方向) left 數據靠左
center 數據靠中
right 數據靠右
valign(垂直方向) top 數據靠上
middle 數據靠中
bottom 數據靠下
nowrap 無 在單元格中換行
表格的標題設置和表頭設置
（1）表格的標題：
<table>
<caption>….</caption>
</table>
<caption>下的屬性值有:
屬性名稱 屬性值 說明
align top 標題在表格上方
bottom 標題在表格下方
（2）表頭設置<th>
結構化格式：
<table>
<thead>……</thead> --------表頭區
<tbody>……</tbody> --------表體區
………………………
<tfoot>……</tfoot> --------表尾區
</table>
表格的邊框設置
屬性名稱 屬性值 說明
border 像素 設置表格的邊框
cellspacing 像素 絕對值，單元格之間的距離
百分比 相對值，單元格之間的距離
cellpadding 像素 絕對值，單元格內容與邊框之間的距離
百分比 相對值, 單元格內容與邊框之間的距離
屬性名稱 屬性值 說明
bordercolorlight 英文/十六 邊框的亮色（IE支持）
bordercolordark 英文/十六 邊框的暗色（IE支持）
屬性名稱 屬性值 說明
frame void 不要顯現表格的邊線
|
above 只要顯現出表格的上邊線
below 只顯現出表格的下邊線
hsides 只顯示表格的上下邊線
vsides 只顯現表格的左右邊線
lhs 只顯現表格的左邊線
rhs 只顯現表格的右邊線 border/box 會顯現出表格的所有邊線
rules rows 只顯示出橫行的格框線
cols 只顯示出直行的格框線
all 顯示全部格框線
groups 表示列組合水平部分
none 不顯示任何格框線
表格的對其方式
（1）表格的對其方式
屬性名稱 屬性值 說明
align left 表格居左(默認)
center 表格居中
right 表格居右
（2）單元格內容的對其方式
表格大小、背景顏色、背景圖案的設置
屬性名稱 屬性值 說明
width 像素 絕對值,像素表示表格寬度
百分比 相對值,百分比表表格寬度
height 像素 絕對值,像素表示表格高度
百分比 相對值,百分比表示表格高度
bgcolor 英文/十六 表格的背景顏色
background URL 表格的背景圖片
合並單元格
屬性名稱 屬性值 說明
colspan 數字 向兩邊擴展欄位
rowspan 數字 向下擴展欄位
嵌套表格的應用
框架
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，並且每個框架都獨立於其他的框架
框架的基本結構
格式：
<frameset>
<frame>
<frame>
<frame>
</frameset>
功能說明:<frameset>用來設置多窗框結構的聲明
<frameset>下的屬性：
屬性名稱 屬性值 說明
cols 像素 設置直排的多窗框環境
百分比 同上
rows 像素 設置橫排的多窗框環境
百分比 同上
屬性格式：
<frameset cols=”120,80,120”>
<frameset cols=”20%,40%,20%”>
<frameset cols=”40%,*,*”>
<frameset rows=”120,80,120”>
<frameset rows=”20%,40%,20%”>
<frameset rows=”20%,*,*”>
<frame>下的屬性：
屬性名稱 屬性值 說明
src URL 鏈接的頁面
name 自定義 框架名稱
noresize true 允許瀏覽器自行改變框架大小
false 不允許
scrolling yes 不管網頁內容的大小，都出現滾動條
no 不管網頁內容的大小，都不現滾動條
auto 瀏覽器自動判斷，是否需要滾動
marginheight 像素 設置垂直方向，窗體內容與邊界的距離
marginwidth 像素 設置水平方向，窗體內容與邊界的距離
frameborder 0\1 不出現框體邊/出現窗體邊線
屬性格式：
<frame src=”URL”>
<frame noresize>
框架的嵌套
格式：
<frameset rows="20%,80%">
<frame src="URL">
<frameset cols="20%,80%">
<frame src="URL">
<frame src="URL">
</frameset>
</frameset>
註意這裏沒有（<body>標簽）
內聯框架
格式:<iframe>…</iframe>
功能: 它是個內聯框架，是在頁面裏生成個內部框架。
屬性名稱 屬性值 說明
src URL 鏈接的頁面
height 像素/% 絕對/相對 高度
width 像素/% 絕對/相對 寬度
scrolling yes 不管網頁內容的大小，都出現滾動條
no 不管網頁內容的大小，都不現滾動條
auto 瀏覽器自動判斷，是否需要滾動條
frameborder 0\1 不出現框體邊/出現窗體邊線
HTML培訓課程-------Day02（表格和框架）