HTML快速入門3

4、表格 (Table)

1. 表格的基本形式

表由 <table> 開始， </table> 結束，表的內容由 <tr>,<th> 和 <td> 定義。

l <tr> 說明表的一個行，表有多少行就有多少個 <tr> ；

l <th> 說明表的列數和相應欄目的名稱（列標題），有多少欄就有多少個 <th> ；

l <td> 則填充由 <tr> 和 <th> 組成的表格；

l border 屬性：說明是否用邊框。

下面是有表格線的表。

例：帶有列標題的表格：

<TABLE BORDER>

<TR>

<TH> 姓名 </TH><TH> 性別 </TH><TH> 畢業學校 </TH>

<TR><TD> 張飛 </TD><TD> 男 </TD><TD> 自學成才 ></TD>

</TABLE>

2.有通欄的表

A 、有橫向通欄的表

<th Colspan=#> # 表明通欄佔據的欄 ( 列 ) 數。

例：跨多列的表

<table border="1" width="100%" cellspacing="1">
<tr>
<td colspan="3"><b><font color="red"> 三國英豪</font> </td>
</tr>
<tr>
<td> 姓名 </td>
<td> 性別 </td>
<td> 畢業學校 </td>
</tr>
<tr>
<td> 張飛 </td>
<td> 男 </td>
<td> 自學成才 </td>
</tr>
<tr>
<td> 劉備 </td>
<td> 男 </td>
<td> 皇家武校 </td>
</tr>
<tr>
<td> 關羽 </td>
<td> 男 </td>
<td> 不祥 </td>
</tr>
</table>

B 、有縱向通欄的表

<th Rowspan=#> # 表示通欄佔據的行數 , 應小於表的行數。

有縱向通欄的表，每一行必須用 </tr> 明確給出一橫向欄目結束 , 這是和表的基本形式不一樣的。

<table border>

<tr><th rowspan=3> Morning Menu</th><th>Food</th> <td>A</td> </tr>

<tr><th>Drink</th> <td>B</td> </tr>

<tr><th>Sweet</th> <td>C</td> </tr>

</table>

2. 表的尺寸，邊框寬度，表格間距

A ． 表的尺寸

width=# ，表寬， height=# ，表高 , # 是以象素爲單位的整數

例：表格尺寸設置：

<table border width=170 height=100>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

B 、邊框寬度

border=# ， # 爲寬度值，單位是象素。

例：邊框尺寸設置：

<table border=10>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

C 、表格單元的間距

cellspacing=# ， # 的單位是象素，

例：將表格間距定義爲 10 個象素，它看起來象用很粗的線劃分的表格。

例：

<table border cellspacing=10>

<tr><th>Food</th><th>Drink</th> <th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

3. 表中文本的輸出

A 、文本與表框的距離

cellpadding=# 。 # 的單位是象素

例：使表的內容與表框離開 10 個象素。

<table border cellpadding=10>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

<tr><td>A</td><td>B</td><td>C</td>

</table>

B 、文本 ( 左右 ) 輸出的位置

表格單元的寬度大於其中的文本寬度時，文本（左右）輸出位置

align=# ， # 爲

left 左對齊

center 居中

right 右對齊

align 屬性可修飾 <tr>,<th> 和 <td> 連接籤。

例：

<table border width=300>

<tr>

<th align=left>Food</th><th>Drink</th><th>Sweet</th>

<tr>

<td align=left>A</td><td align=center>B</td><td align=right> C</td>

</table>

圖：

C 、文本 ( 上下 ) 輸出的位置

表格高度大於其中文本的高度時，用 valign=# 說明文本上下的位置。 # 爲：

Top 上對齊

middle, 居中

bottom, 下對齊

baseline 文本基線與表格中線對齊

特別注意的是 baseline 對齊方式，文本出如今網格的上方而不是相象中的下半部。

valign 可修飾 <tr>,<th>,<td> 。

例：

<table border height=100>

<tr>

<th>Food</th><th>Drink</th>

<th>Sweet</th><th>Other</th>

<tr>

<td valign=Top>A</td>

<td valign=middle>B</td>

<td valign=bottom>C</td>

<td valign=baseline>D</td>

</table>

4. 表格顏色

表格的顏色用 bgcolor=# 指定。 # 是 16 進制的 6 位數，格式爲 rrggbb ，分別表示紅、綠、蘭三色的份量。或者是已定義好的顏色名稱，參見文本顏色。

<table border>

<tr><th bgcolor=000000>

<Font color=ffffff>Food</Font></th>

<th bgcolor=white>Drink</th>

<tr>

<td bgcolor=olive>A</td><td>B</td>

</table>

如圖： 注 000000 爲黑色， FFFFFF 白色 ， olive 橄欖綠

5、超文本連接(這個部分沒有截圖，請本身試驗）

超文本連接是 html 最吸引人的優勢之一。使用超文本連接指針可使順序存放的文件具備必定程度

上隨機訪問的能力，更加符合人類的思惟方式。

在本節，咱們將要學習如下的知識：

建立文件內部的超文本連接

建立到其它內部文件和外部文件的超文本連接

1. 統一資源定位器 URL

統一資源定位器 URL (Uniform Resource Locator) 是文件名的擴展。

URL 構成： protocol://Machine.name[:Port] ／ Directory ／ filename

Protocol: 訪問該資源所採用的協議，即訪問該資源的方法，它能夠是 http 超文本傳輸協議，

也能夠是 ftp 文件傳輸協議，還可使 file 、 news 等其它協議。

Machine.name: 訪問該資源主機的 IP 地址或域名 , 一般以字符形式的域名出現 , 如 www.rwstar.com . 。

[:Port] 該資源主機 ( 服務器 ) 所使用的端口號。通常狀況下默認爲 80 ，

只有當服務器所使用的端口號不是默認的端口號時才需寫 出。

Directory/Filename: 是該資源所在主機（服務器）上的路徑和文件名。

一個典型的 URL 爲 :http://www.xfocus.com/index.php 。它表示安全焦點Web服務器上 的首頁文件。

2. A 標記

連接主要經過 A 標記來實現。 A 標記可支持較多的屬性，其中最重要的是 Href 和 Name 屬性。

l href 屬性 （ Hypertext Reference 的縮寫）

若是 A 標籤中包含 Href 屬性，則該標籤的起始標記和結束標記之間的文本就變成了超文本 (Hypertext)

它是要訪問（連接）資源的名稱，在瀏覽器中，超文本一般會以不一樣顏色並帶下劃線的字符顯示。

基本格式 <a Href = "Url" > 要訪問（連接）資源的名稱 </a>

( 注意引號 )

href 屬性中的統一資源定位器 (url) 是指向的要訪問資源的路徑，隨後的「字符串」在 html 文件中充當

指針的角色。當用鼠標點擊這個字符串時，瀏覽器將會經過網絡，沿 Url 指定的路徑發出頁面的請求，

並將解釋執行返回的頁面。

例： <a href=」http://www.163.com」>點擊進入網易 </a>

點擊「點擊進入網易」，便可進入電子科大人文風網站的首頁。在這個例子中，充當指針的是

「點擊進入網易」這幾個字符 .

六．文字移動 <marquee>

基本格式

<marquee 移動屬性 > 移動文字 </marquee>

文字移動屬性的設置 :

l 移動方向： <direction=#> # 爲 left, right

例 :

<marquee direction=left> 移動文字， 從右向左移！ </marquee> <P>

<marquee direction=right> 移動文字， 從左向右移！ </marquee>

l 移動方式： <bihavior=#> #=scroll, slide, alternate

例 :

<marquee behavior=scroll> 移動文字，一圈一圈繞走！ </marquee> <P>

<marquee behavior=slide> 移動文字， 移動一次就中止！ </marquee> <P>

<marquee behavior=alternate> 移動文字，來回移動！ </marquee>

l 循環次數： <loop=#> #= 次數；若未指定則循環不止

例 :

<marquee loop=3 width=50% behavior=scroll> 移動文字，移 3 次 </marquee>

注意： width= ＃，從瀏覽器窗口寬度的指定的位置開始移動，能夠爲象素或窗口寬度的百分比。

l 移動速度： <scrollamount=#> # 爲每次移動的象素數 , 越大移動速度越快。

例 :

<marquee scrollamount=20> 移動文字，移動的較快 </marquee>

l 延時 <scrolldelay=#> ＃爲時間，毫秒數，值越大間隔越久

例 :

<marquee scrolldelay=1000 scrollamount=500> 文字間歇移動 </marquee>

例 :

<Font Size=6>

<marquee align=top width=400> 移動文字，對齊方式 </marquee>

</Font>

l 底色 <bgcolor=#>

#: rrggbb 16 進制數碼，或者是預約義色彩 , 如 red,green,yellow 等

例 :

<marquee bgcolor=green>< 移動文字，綠色背景 </marquee>

(這個部分沒法用圖片作例子，除非用屏幕錄象軟件）