1. 程式人生 > >HTML培訓課程-------Day02(表格和框架)

HTML培訓課程-------Day02(表格和框架)

lsp 不同 idt 常用屬性 數字 相對 left 等等 居右

表格

在網頁中表格是一種經常使用到得設計結構,就像表格的內容中可以包含任何的數據,如文字、圖像、表單、超鏈接、表格等等,所有在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 不要顯現表格的邊線

該屬性必須在border的屬性值不為0的狀態下!

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(表格和框架)