Transcript 設定欄位的寬度－width 屬性

第 14 講次 (book2:chap6+chap7)
網際網路導論
嘉義大學資訊工程學系李龍盛老師
[email protected]
本著作除另有註明外，採取創用
CC「姓名標示－非商業性－相同
方式分享」台灣3.0版授權釋出 1
表格處理
 超連結處理

Content
2
表格處理
3
<table>標籤是組成表格最基本的要件, 其他的
表格標籤, 都必須放在這組標籤之間, 才能發揮其
效用。
 <table>...</table> 標籤預設是產生 『無框線
』 的表格。
 如果希望表格要顯示框線, 則需加上 border 屬
性, 以 border 指定框線的粗細。
<table border=“1”>
…
</table>

插入表格－<table>



<tr>、</tr> 標籤用來定義表格中的列。<table>
標籤內有多少組 <tr>、</tr> 標籤, 就表示該表格
有多少列的資料。<td>、</td> 標籤是用來定義資
料列中的欄位, 在 <tr>、</tr> 之間有多少組
<td>、</td> 標籤, 就表示該列有多少個欄位。
<tr> 與 <td> 標籤必須一起使用, 才能定義出表格
。
只有單獨使用<tr>、</tr> 標籤或 <td>、</td>
標籤, 瀏覽器將無法判斷, 也就無法做出表格了。
定義表格的列與欄－<tr>、<td>




<th></th>標籤組用來定義欄位標題的名稱, 這組
標籤必須放在<tr>...</tr>標籤內。
<th> 與 <td> 都是用來定義每個欄位上的資料。
每個 <tr>...</tr> 標籤內有多少個 <th>或
<td> 標籤, 也就表示該列有多少資料欄位。
<td> 預設的格式是 align=left (文字靠左), 而
<th> 的預設格式則是 align=center (文字置中),
並且會以粗體顯示 <th>... </th> 之間的文字。
一般而言, 我們會以 <td> 標籤來填入資料欄位, 以
<th> 標籤來填入標題欄位。不過這並非強制規定,
只是方便我們規劃和使用表格。
6-1-4 建立標題欄位－<tr>、<th>




<caption>...</caption> 標籤是用來定義表格的標題
。它必須放在<table>...</table> 標籤組內, 但不可以
放在 <tr>...</tr>、<th>...</th>、<td>...</td>
這些表格欄位標籤組之中。
<caption>...</caption> 所產生的標題, 預設是顯示在
表格的上方,如果想讓其顯示在表格的下方, 則需使用
align 屬性。
瀏覽器預設是將表格標題放在整份表格的上方 (即 align
= "top")。若我們希望將表格標題放在整份表格的下方,
只需修改成 <caption align = "bottom">即可。
表格標題的位置是取決於 align 屬性, 即使將
<caption> 放在 <tr>、<th>、<td> 等標籤的下方,
也不會影響標題的位置。
為表格加上標題－<caption>


簡便型架構寫法
從這個簡便型的表格架構, 相信您可以看出, 這只不
過是將原本一對對的 <tr>...</tr>、
<th>...</th>、<td>...</td> 簡化成只剩下單一
標籤 <tr>、<th>、<td> 而已。
簡便型的表格用法

框線的厚度是以圖點 (pixel) 為單位
<table border="10">
設定表格框線－border 屬性


width=100% 即是指定表格寬度相對於瀏覽器視窗
寬度的 100%, 也就是將表格寬度放大至全瀏覽器視
窗寬度的意思; 以此類推, 當我們設定 width=80%
時, 則是指示表格寬度佔瀏覽器視窗寬度的 80%。
在 <table> 標籤上的 width 屬性, 除了可以使用百
分比符號 “%” 來設定表格在視窗中所佔的比例大小
外, 也可以直接填入圖點數, 例如：30 px。然而有一
點要注意的是, 如果將表格的寬度設得太小, 以致資
料長度比欄位還要大 (或小到超過瀏覽器所能調整的
地步), 則瀏覽器還是會顯示完整的資料, 該屬性值便
自動失效。
調整表格的寬度－width屬性

在 <table> 標籤設定 height 屬性的方法跟設
定 width 屬性是一樣的。
調整表格的高度－height 屬性

表格的框線粗細可透過 border 屬性調整, 欄位
格線是否也可以調整呢？瀏覽器預設的欄位格線
寬度是2個圖點, 我們也可以用cellspacing 屬性
來控制。
調整欄位格線的寬度－cellspacing
屬性

資料欄位內, 資料與資料欄位格線間的距離預設
是 1 個圖點寬, 若想調整這個寬度, 可以透過
cel lpadding 屬性值來控制。
調整資料與欄位格線的間距－
ellpadding 屬性
表格中也可以設定自己背景的顏色, 設定的方式
如下：
<table bgcolor=“#00ff00”>
 同理，也可以使用background來設定背景圖片

設定表格背景顏色－bgcolor 屬性
在 <tr>、<th>、<td> 標籤內也有 align 屬
性, 可以用來調整欄位中資料的位置, 共有三種設
定值,分別是 left、center 與 right 。
 valign 屬性在 <tr>、<th>、<td> 標籤內有
top、middle 與bottom 這些設定值。top就是
將文字往欄位頂端上擺, middle 當然就是將文字
擺在整個欄位居中的位置, 而 bottom 就是將文
字往欄位底端擺。

調整資料位置－align 與valign屬性

當某個 <th> 或 <td> 欄位上的資料比較多的時
候, 瀏覽器會自動將文字換行。但我們也可以設定
要瀏覽器不要自動換行, 只要在 <th> 或 <td>
標籤內加入 nowrap 屬性即可。
設定文字資料不自動換行－nowrap
屬性
width 屬性除了可加在 <table> 標籤內外, 也可
加在<th>、<td> 標籤內。只是加在<table>
標籤內 width 屬性是用來決定整份表格的寬度,
而加在 <th> 或 <td> 標籤內 width屬性則是用
來決定該欄位的寬度而已。
 width 屬性除了直接填入圖點數設定其大小外, 還
可以使用 "%" 符號來設定。

設定欄位的寬度－width 屬性

為了作出橫向跨欄的效果，使用 colspan 與
rowspan 屬性可以任意地合併上下兩個欄位, 或
是合併左中右三個欄位：colspan 屬性是用來設
定欄位橫向的合併狀態, 而 rowspan 屬性則是用
來設定欄位縱向合併的狀態。
將欄位合併－colspan 與 rowspan
屬性

在 <table> 標籤中我們已經介紹過這兩個屬性的
用途, bgcolor 用來設定背景的單一顏色；
background 則是設定要當作背景的圖片。若用
在 <th>、<td>之中, 則作用範圍僅侷限於表格
中的某個欄位。
設定欄位的背景顏色－bgcolor 屬性
在 HTML 文件輸入連續的空白, 在瀏覽器上也只
會顯示一個空白, 因此無法用空白來進行文字的排
版。
 不過有了『&nbsp;』 就可以達到想要的效果了,
只要每輸入 1 個 『&nbsp;』, 瀏覽器就會顯示
1 個空白。

空白字元與空白欄位設定－&nbsp
超連結處理
21

網頁的基本結構大致有三種：
◦ 循序式的線狀結構
◦ 階層式的樹狀結構
◦ 網狀結構
基本的網站結構
如果網站內容具有這種讓人循序參觀 (通常就是
內容不會太多、太複雜), 而且又不希望訪客漫無
目標的亂闖, 就能將網頁以線性的方式來排列, 達
到 『主導』 參觀路線的目的。
 在每一頁中主要的就是提供可返回上一頁或下一
頁的 <a href> 連結, 當然在各主題下, 有必要
時可加上一些子主題的分支。

循序式的線狀結構
如果要做的是將一本書『網頁』化, 採用階層式
的樹狀結構最適合了。翻開一本書或是研究報告,
您會發現層次分明者皆是用第 1 章、第 2 章...,
章底下再分節, 節底下再分小節, 以這樣的方式將
一本書組織起來。
 在同一層的網頁, 應該彼此都能讓使用者前後瀏
覽, 例如在所有網頁中建立 『上一頁』、『下一
頁』 的連結, 或是利用無框線表格、分割視窗等
技巧, 將各網頁的連結置入畫面中, 當然能回到主
目錄、上一層目錄的連結也是不可少的。

階層式樹狀結構
樹狀結構是一種很好用、也很好管理的網站組織
。不過如果覺得網站內容具有多種觀點, 需要多
元化的架構, 就可考慮使用網狀的結構。
 在網狀結構中, 網頁間的連結關係就像一張網一
樣交錯著。
 這樣使用者會比較容易找到與目前主題前後相關
的其它主題。

網狀結構

超連結除了可以用來建立網站的結構, 將網站內
的各個網頁串連起來, 更可以串連網際網路中其
他網站的內容, 讓您的網頁更豐富。
建立超連結－<a href>




要連到 Internet 上的網頁或是其它的資源, 我們必
須先知道對方的 URL (Uniform Resource
Locator, 網頁位址) 才行。
在 html 文件中, 只要利用標籤註明 URL, 便可建立
一個超連結。使用者只要在超連結的文字上按一下,
就可開啟該連結指向的網頁。
在 html 文件中要建立文字超連結的標籤為 <a> 標
籤 (Anchor)。
<a href=“連結的URL”>說明文字</a>
瀏覽器會將 <a> 和 </a> 標籤之間的說明文字, 以
藍色的文字加上底線顯示, 只須在說明文字上按一下,
便可直接連上該網頁了。
建立連線到 Ineternet 網頁的超連結




既然這些網頁都放在本機 (同一個伺服器) 上, 為什麼建
立連結要這麼麻煩？其實有更快速的方法, 就是以 『相對
路徑』 指定網頁的位置。
瀏覽器會將 <a> 和 </a> 標籤之間的說明文字, 以藍色
的文字加上底線顯示, 只須在說明文字上按一下, 便可直
接連上該網頁了。
如果該份文件與目前瀏覽的文件在同一伺服器上, 但是所
在的資料夾卻不相同, 此時可仿照在 Windows 的路徑觀
念, 在 href 屬性中指定目的文件與目前文件所在目錄的
相對位置。
由於使用這個方法時, 瀏覽器是以目前文件所在位置為基
準路徑, 再利用 <a> 標籤中指定的路徑去讀取目的文件,
因而稱為相對路徑。
相對路徑

如果超連結是指向其他伺服器上的文件, 此時就
要指定完整的 URL。像這樣指定完整的 URL 便
稱為絕對路徑。
絕對路徑



當我們執行 『檔案/另存新檔』 命令將網路上的文件存
檔, 然後在自己的電腦上開啟此文件, 若文件中的超連結
都是使用相對路徑的方式建立, 此時會發現其連結的路徑
都變成：
file:///C|/.../檔案名稱
也就是指向目前目錄下或是一個不存在的目錄下的檔案。
如果網站設計了一個索引頁讓使用者下載, 為避免發生如
上所述的情形, 使得所有超連結都變成指向使用者本機的
位置, 除了將所有連結都用完整的絕對路徑指定外, 還有
一個方法, 就是在文件開頭加上一個 <base> 標籤, 就
能讓文件中所有連結的相對路徑, 都會自動加上 <base>
標籤中指定的路徑, 成為一個完整的URL。
指定相對路徑的基準路徑－<base>
<base> 標籤可用於<head> 標籤之中。
<head>
<title>…</title>
<base href=“http://www.ncyu.edu.tw/”>
</head>
 進入瀏覽器開啟這個檔案, 將滑鼠移到我們所設
的連結上面, 會發現其URL 已自動加上了在
<base> 中指定的位置。

指定相對路徑的基準路徑－<base>



如果能像網路上一些做成 html 的 FAQ 文件一樣,
只要在有興趣的問題上按一下, 不管該解答是在文件
的開頭、中間或結尾, 瀏覽器視窗中都會直接顯示該
問題的解答, 如此就不需捲動視窗內容。
要做到這樣的超連結必須先在目的文件中的特定位置
建立以<a name> 標籤做成的錨點 (連結點)。
<a name=“錨點名稱”>
由於 <a> 是 Anchor 的縮寫, 所以我們稱之為 『
錨』 , 也就是先在這個特定位置給一個錨的名稱, 透
過此名稱, <a href=...> 才知道要指向何處。
建立文件內的連結點
設定了 <a name> 的標籤後, 當然要建立一個
能直接連到這個 <a name> 所在位置的超連結
才有用處。
 除了連結文件本身的錨點之外, 也可以連結到其
它的文件中的錨點。我們只要在其 URL 的最後
再加上目的文件中的錨點名稱即可。
<a href=“連結URL#錨點名稱”>…</a>

建立指向文件內錨點的超連結

超連結除了可以使用在文字上, 也可以使用在圖片
上。要為圖片加上超連結的寫法如下：
<a href=“連結URL”><img src=“圖片URL”>
</a>
為圖片加上超連結
瀏覽器顯示 HTML 文件時, 代表超連結文字部份
會自動加上底線標示；而代表超連的圖片也會自
動加上邊界框標示。這樣能使文件中的超連結看
起來比較明顯。
 如果覺得圖片加上邊界框會破壞畫面的美感, 只
要在 <img> 標籤中設定border= “0” 這項屬
性就可以取消邊界框了。

不加框的超連結圖片

影像地圖有 2 種
◦ 第一種稱為 Server Side 影像地圖, 當使用者在影像
地圖上按下滑鼠鈕時, 瀏覽器將滑鼠的座標傳送到
Server,由 Server 根據原先設定好的Map檔來決定要
連到哪一個 URL, 然後將這個 URL 傳回瀏覽器, 瀏覽
器再將該對應的網頁載入。這種影像地圖隨 Server的
不同而有 NCSA 與 CERN 兩種。
◦ 第二種則是相當流行的 Client Side 影像地圖, 這種作
法就是事先在網頁中指定在哪一部分按滑鼠, 就連上哪
一個 URL, 所以使用者在按滑鼠時, 瀏覽器就能決定要
連到哪一個 URL,與 Server 完全無關, 所以這種作法
稱作 Client Side 影像地圖。
影像地圖的種類

雖然同樣具有連結屬性, 但 Client Side 影像地
圖並不是用 <a href> 標籤建立的。除了要用
<img> 標籤將代表影像地圖的圖片加入網頁中,
還有兩項工作：
◦ 第一是設定一個滑鼠位置與所要連結的 URL 之對照表
。
◦ 第二個工作就是在 <img> 標籤中增加一個 usemap
屬性，設定成會使用該對照表的影像地圖。
實作 Client Side 影像地圖



滑鼠在圖片上的位置與 URL 的對照表是用 <map>
標籤來定義, 這個對照表可與圖片放在同一個檔案中,
或是放在另一個檔案。
接下來要做的就是用 <AREA> 標籤定義圖片中每塊
區域的位置、大小、及所要連結的 URL。
<map name=“amap”>
<area [shape=“形狀”] coords=“第一塊區域的
x,y座標” href=“連結URL”>
<area> 標籤中的第一個屬性是 shape, 可用它來
設定此區域的形狀, 有 rect (或rectangle)、circ (
或 circle)、poly (或polygon) 三種(矩形、圓形、
多邊形), 沒有加上此屬性時會自動設為 rect 。
製作對照表

第二個屬性 coords 是設定該區域的位置及大小,
在矩形的狀況下, 只須列出矩形左上角及右下角
的 (x, y) 座標, 總共有四個值。
coords

如果希望某個區域在被按下時不會連到任何地方,
則可用 nohref 來取代 href 屬性, 例如上述的
(0,0,99,99) 要讓它不會連出去,可寫成:
<area coords=“0,0,99,99” nohref>
nohref
shape=circ 時 coords 的描述需要一組圓心的
座標與半徑的值。
<area shape=circ coords=“50,50,20”
href=“連結URL”>
 其中圓心的座標是 (50,50), 半徑則是 20 個圖
點。

Circ 的座標描述法

shape=poly 時則需依順序填入多邊型頂點的座
標組, 且至少要填入 3個點。
poly 的座標描述法

對照表做好後, 在 <img> 標籤中再加入一個
usemap 屬性, 指定對照表的位置就算完成。
設定圖片為影像地圖

如果影像地圖很大、很複雜, 根據 HTML 規格指
出, 可考慮將 MAP 的對照表放在另外一個
HTML 檔案中, 然後在 <img> 標籤中參考這個
外部的檔案。
外部 MAP 檔

如果在各 area 標籤中所指定的座標範圍有重疊,
會以第一個出現的area 標籤為準, 後來有重疊到
的區域就會被忽略。
重疊的區域

指定 FTP 站的位址, 當然也可加上資料夾或檔案
名稱。若連結指向資料夾, 則會連線到該資料夾
內, 同時列出資料夾內的檔案；若連結指向檔案,
則會下載該檔案。
<a href=“ftp://ftp.csie.ncyu.edu.tw”>資工
系的ftp</a>
FTP連結

指定所要進入的新聞群組名稱。在新聞群組的超
連結上按一下, IE 會自動啟動預設的 Outlook
Express 閱讀新聞郵件。
<a href=“news:tw.bbs.comp.hardware”>
硬體討論群</a>
News連結
我們常常可看到一種按了之後可寫信給該網站作
者的連結, 此種 URL 是用 mailto: 來指定, 例如
下面這個例子：
<a href=“mailto:[email protected]”>
聯絡中心服務人員</a>
 使用者只須在 E-Mail 連結上按一下, 就會自動
開啟郵件處理程式, 即可寄信到 <a> 標籤中所
述的電子郵件信箱中。

E-Mail連結

Based on
第六章與第七章
最新HTML&CSS網頁程式設計，施威銘研究室
著，台北：旗標出版公司，F6462。
reference
49