细说HTML标签.doc

Hyper Text Markup LanguageHTML語法介紹 細說HTML標籤 在HTML語法中，大致上可以分為： ( 節錄自網站建置百寶箱)1. 網頁架構：主要網頁主架構的介紹 2. 分隔標籤：也就是所謂的水平線 3. 排版標籤：針對標籤的屬性，可做適當的版面編排 4. 字體標籤：教導您設定文字的字體。 5. 文字標籤：教導您設定文字的顏色、行距、變化.等等。 6. 影像標籤：教導您如何在網頁中，植入圖像。 7. 背景標籤：教導您如何設定背景顏色或是背景圖像。 8. 連結標籤：教導您如何設定超連結，以及開視窗的條件。 9. 表格標籤：教導您如何在網頁中運用表格。 10. 序列標籤：教導您如何設定文字序列或圖形序列。 11. 表單標籤：教導您如何製作可填寫用的表單。 12. 框架標籤：可讓同一個視窗由多個網頁一起組成。 13. 其他技巧：讓您的整個網頁背景可以讓您設定為圖片或是聲音。 由於此份講義是取自.tw/html/，而且網頁效果是無法完全呈現於文件檔案，所以對文件效果有疑問者可以上網至該網站參考。1.1 網頁架構 網頁製作教學BODY之間則為主要語法所在，也是網頁的主要呈現部分。【標籤解說】 以上看到的就是一篇最簡單架構的網頁。沒錯，網頁其實就是一堆標籤（所謂標籤就是指被包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網頁了。 簡單而言，通常一份完整的網頁包含了二個部份：抬頭（HEAD）、文件本體（BODY）。也就是各位在上面所看到的以及。 在抬頭的部份中，有另一組標籤。打在這裡面的文字會出現在瀏覽器視窗最上頭藍色部份裡，當作一篇網頁的主題。 您可能會發現，為什麼我一直沒提到這一組標籤，嗯！因為它可有可無。這一組標籤是告訴瀏覽器說：我是一份HTML文件喔！也就是說它是一個網頁的格式啦！通常都包在網頁的最上下兩端，將所有的原始碼都包起來。 1.2 分隔標籤 【文字上的分隔標籤】 或許你已經發現這個問題了：天啊！我不是在記事本裡排版排得很漂亮，為何透過瀏覽器看起來一切都走了樣？對啊！別太訝異，在網頁的編排裡，並不像漢書或WORD一樣，只要拼命按Enter鍵或空白鍵，便能完成分段或分行，因為，HTML語言是不認識我們所謂的Enter鍵或空白鍵，所以不管您按了多少次的空白或Enter，瀏覽器都會當作沒看見啦！ 1. 使用方法：強制斷行標籤、強制分段標籤 2. 標籤解說：我們在寫文章時，有時候在特定的地方會強迫斷行（），或是在寫完某一段的時候便會分段（），寫網頁也一樣，而且更需要斷行及分段的功能，以免整個網頁看起來亂糟糟的。 3. 使用範例： 原始碼呈現結果 這是一個斷行的範例看出來了嗎？這是一個斷行的範例看出來了嗎？ 這是一個分段的範例基本上他會比斷行還多空出一行這是一個分段的範例 基本上分段會比斷行還多空出一行 【分隔線標籤】 1. 使用方法：上一段文字內容下一段文字內容 2. 標籤解說：利用這個標籤便可產生一條橫分隔線。另外，其有些屬性分別說明如下： 3. 使用範例：一般用法尚未加任何屬性。原始碼普通分隔線呈現結果普通分隔線 4.顏色屬性用法：原始碼橘色分隔線呈現結果橘色分隔線 5.寬度屬性用法：，其單位為px（像素），寬度亦可用百分比來作設定，如50%即意為寬度佔螢幕50%。原始碼寬度為240px的分隔線呈現結果寬度為240px分隔線 6.厚度屬性用法：原始碼厚度為5的分隔線呈現結果厚度為5分隔線 7.位置屬性用法：，其設定值有三個，也就是置左align=left、置中align=center、置右align=right原始碼靠右的分隔線呈現結果靠右的分隔線 8.陰影屬性用法：，無設定值，只要將 noshade 加入即可，通常會配合顏色設定，效果較佳。原始碼實心分隔線（無陰影）呈現結果實心分隔線（無陰影） 1.3 排版標籤 【文字置左、置中、置右】 1. 使用方法：老實說，剛剛我們學過的分段標籤再加上一些簡單的屬性設定，就可以讓其整個文字段落置左、置中或置右了，就如下表所示： 原始碼呈現結果 文字靠左文字靠左文字置中文字置中文字靠右文字靠右2. 標籤解說：嗯！祕訣就在於align=對齊位置而已啦！align是分段標籤的屬性之一，這個屬性將來會常常在不同標籤中看到，它的功能是專門在設定水平對齊位置，其常見的設定值有三個，也就是置左（align=left）、置中（align=center）、置右（align=right）。 【置中標籤】 1. 使用方法：這是置中 2. 標籤解說：這個標籤是最常用到的標籤了，除了文字，對於圖片、表格，任何可以顯現在網頁上的東西都可以置中喔！ 3. 使用範例： 原始碼呈現結果 這是最中間這是最中間 【向右縮排標籤】 1. 使用方法：要縮排的文字 2. 標籤解說：利用這個標籤可以將其包起來的文字，全部往右縮排。而且加一組標籤，往右縮排一單位，加兩組標籤，往右縮排兩單位，依此類推。 3. 使用範例： 原始碼呈現結果縮排1單位縮排1單位縮排2單位縮排2單位【保存原始格式標籤】 1. 使用方法：文字內容 2. 標籤解說：利用這個標籤可以將其包起來的文字排版、格式，原封不動的呈現出來。算是相當好用的標籤之一。 3. 使用範例： 原始碼呈現結果文字格式文字格式1.4 字體標籤 【標題標籤】 1. 使用方法：標題內容 2. 標籤解說：標題的大小一共有六種，兩個標籤一組，也就是從到，最大，最小。使用標題標籤時，該標籤會將字體變成粗體字，並且會自成一行。 3. 使用範例：原始碼呈現結果 標題一標題一標題二標題二標題三標題三標題四標題四標題五標題五標題六標題六【設定字體大小標籤】 1. 使用方法：文字內容 2. 標籤解說：標題的大小一共有七種，也就是（最小）到（最大），另外，還有一種寫法：文字內容，其意思就是說：比預設字大一級。當然也可以 font size=+2（比預設字大二級），或是 font size=-1（比預設字小一級），以一般而言，預設字體多為 3。 3. 使用範例：原始碼呈現結果 字體一 或是字體一字體一 字體二 或是字體二字體二 字體三 或是字體三字體三 字體四 或是字體四字體四 字體五 或是字體五字體五 字體六 或是字體六字體六 字體七 或是字體七字體七 【字型變化標籤】 1. 使用方法：文字 2. 標籤解說：在文字標籤裡，對於文字的格式也有相當多的變化，如粗體、斜體.等，此外，也定義了一些現成的格式供編者使用，如強調、原始碼.等，當然，這只是方便您參考用，並無強迫說遇到原始碼就要加上原始碼的標籤。 3. 使用範例：原始碼呈現結果 粗體粗體 斜體斜體 底線底線 上標上標 下標下標 打字機打字機 閃爍（ie沒效果）閃爍 強調強調 加強加強 範例範例 原始碼原始碼 變數變數 定義定義 引用引用 所在地址所在地址【文字顏色設定】 1. 使用方法：文字顏色 2. 標籤解說：文字也可以設定 顏色喔！至於顏色有哪些.這.哪天我心血來潮再來做個色彩對應表吧！ 3. 使用範例：原始碼呈現結果 紅紅色的字喔！ 橙橙色的字喔！ 黃黃色的字喔！ 綠綠色的字喔！ 藍藍色的字喔！ 靛靛色的字喔！ 紫紫色的字喔！ 黑黑色的字喔！ 灰灰色的字喔！ 1.5 文字標籤 【文字字型設定】 1. 使用方法：文字 2. 標籤解說：網頁上也可以使用字型喔！唯一的一個限制是：對方也要有該字型！否則看到的仍然還是細明體。另外要說明的是，這個標籤並無法保證在每個瀏覽器上都能正常的顯現，不過這並沒有關係，看不到特殊的字型時，瀏覽器仍會以細明體來顯示，所以不用怕會一團亂！ 另外，如果您的網頁中有加上這一行敘述（指定網頁的語言格式，以後我會解釋），那麼，netscape可以正確顯示出中文，但英文無反應。若沒有加該行，那麼英文會正確顯示，但中文卻仍是細明體。至於 ie 系列，均能正常顯示。 3. 使用範例：原始碼呈現結果 標楷體標楷體 華康儷中黑華康儷中黑 【特殊字元】 1. 使用方法：  2. 標籤解說：很多特殊的符號是需要特別處理的，比如說 這兩個符號若想要呈現在網頁上是沒有辦法直接打 的，要呈現 必須輸入編碼表示法：<，常用的如下： 3. 使用範例：原始碼呈現結果   ( 代表一個不斷行空白) < && " 【設定文字內定值大小】 1. 使用方法： 2. 標籤解說：這個標籤可以改變文字大小的內定值，直接加在標籤之後就行了。一般而言，若是沒有特別設定，文字大小內定值預定值為3。 1.6 影像標籤 【影像標籤】 在使用影像標籤時有兩件事值得注意一下，一是檔名，二是路徑。首先要注意的就是，檔名是否正確以及大小寫是否一致！圖檔名稱不正確，任電腦再厲害也找不到您要的圖，檔名大小寫不一致，如Image.gif、image.gif、image.GIF在自己的電腦中看都能正確的顯示，但是一但傳到網路上去時，因為系統不一樣的關係（電腦伺服器的作業系統可比個人用電腦的作業系統嚴謹多了）就變成三個不一樣的檔案了，所以，可別忽略檔名大小寫不一致的影響。 另外一個就是路徑問題了，這個問題也不難，我們在稍後會提到。我們先來看看影像的標籤如何寫。 1. 使用方法： 2. 標籤解說：目前常見的網頁圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色，不過色彩比較鮮豔乾淨漂亮，適合電腦美工圖案。而jpg格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用jpg格式來呈現。 3. 使用範例： 基本用法用法：顯示圖片最基本的方法（就是不加任何屬性啦！）其中 boy.gif 就是圖檔的檔名。原始碼嗨！我是本站的模特兒喔！呈現結果嗨！我是本站的模特兒喔！4.長寬設定用法：設圖片的大小，其實不用設也可以，但是有設更好，可以加快瀏覽速度，因為瀏覽器就不用在那邊花時間算您的圖片有多大啦！此外您也可以自己隨意設定圖片大小。原始碼呈現結果5.加上說明用法：滑鼠一到圖上時，說明文字就會自動出現。此外，在圖片未顯示出來或顯示不出來時，也會以這一段字代替，讓使用者知道這個未顯示出來的圖片究竟是幹嘛用的。原始碼移到圖上看看。呈現結果移到圖上看看。6.圖片位置用法：圖片位置設定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成文繞圖的效果。原始碼嗨！我往右邊靠！呈現結果嗨！我往右邊靠！原始碼嗨！我往左邊靠！呈現結果嗨！我往左邊靠！原始碼文字對齊我頭頂！呈現結果文字對齊我頭頂！原始碼文字對齊我腳底！呈現結果文字對齊我腳底！原始碼文字對齊我中間！呈現結果文字對齊我中間！原始碼文字對齊我絕對中間！呈現結果文字對齊我絕對中間！7.邊框設定用法：設定邊框大小，通常都設成 0 感覺比較美觀啦！因為內定的框框實在是不怎麼漂亮.。尤其在連結時，設框框簡直是醜斃了.。原始碼呈現結果8.左右間距用法：離文字的水平距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。原始碼左邊的字右邊的字呈現結果左邊的字右邊的字9.上下間距用法：離文字的垂直距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。原始碼上面的字下面的字呈現結果上面的字下面的字10. 由於此網頁有用css控制版面圖文，故在netscape下觀看，會稍有不正確。 【網頁影像重要觀念】 1. 關於路徑：現在我們來談談圖片路徑的事，路徑不對，不管您的網頁名稱寫的多正確也沒用，因為瀏覽器無法尋著您的路徑去找到該有的圖片，所以，我們來看看該如何正確的使用路徑。有些人並不喜歡將網頁及圖通通放在同一個目錄下，比如說有人將圖檔全放在c:images裡，而網頁檔放在c:demo裡，這樣子的話，我們該如何正確的寫圖片的路徑呢？我將幾種常見的情形整理成下表：html檔的位置圖檔的位置寫法情形說明 c:democ:demo圖文均在同一目錄 c:democ:demoimages圖在網頁下一層目錄 c:democ:圖在網頁上一層 c:democ:image圖文在同一層但不同目錄 2. 或許有人看到不明就理，我來說明一下，./是回到上一層目錄的意思。images/則是進入下一層目錄image之意，而images/的意思就是，回到上一層目錄，然後再進入目錄images中。以上我們使用的均為相對路徑的概念。 3. 影像單位：或許您會常常看到px這個單位，沒錯，這是我們在製作最常用的一個單位了。這個單位完整的寫法是pixels，我們稱之為像素。像素，是螢幕上的一個小光點，然而這一小光點的大小，並非是固定的，舉個例子而言，螢幕本身十五吋，不會因為你的任何設定而變成十七吋。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：640 480、800 600、1024 768。舉其中之一的640 480來說，其代表的就是在螢幕上有寬640個光點，高有480光點，若是我們將解析度調整為800 600其寬勢必要從640變成800個光點，也因此，該光點便會變小一點，所以，我們看起來就會覺得解析度調高後，螢幕內的東西，變得小小的，很精緻，那就是因為光點變小的原因。 4. 影像格式：網頁用的圖檔目前只有gif格式（即副檔名為gif的圖檔，如：bg.gif）以及jpg格式（即副檔名為jpg的圖檔，如：bg.jpg）為一般的瀏覽器所接受。其他如bmp格式或是pcx格式都是無法在網頁上使用的，若非得要用，那就利用影像繪圖軟體來作格式的轉換吧！ 圖檔範例說明 gif格式的圖形只能以256個顏色顯示，雖然其色彩較少，但顏色鮮豔亮麗，若是圖形顏色不多，用gif格式存檔會較漂亮。 jpg格式的圖形是以全彩顯示，適合用在相片或是漸層顏色的圖片上，壓縮比例以75%為適中。 1.7 背景標籤 【背景標籤】 說穿了，背景標籤只有這個標籤，其餘的效果，只要加上一些簡單的屬性便可做到。 1. 使用方法： 2. 標籤解說：這個標籤其實應該老早就要講了，畢竟它是構成網頁不可或缺的基本要素之一（哎哎哎.現在放馬後砲有什麼用！）。我們背景顏色或圖片的設定以及連結字體的顏色，通通都放在這標籤裡面。我就其屬性來一一解說： 背景顏色用法：設定背景顏色。有人會說：我已經設定了背景圖片，那背景顏色還有用嗎？當然有用！當使用者連結到貴站時，若背景圖案還沒傳輸完之前（有的背景圖蠻大的），就會先顯現背景顏色，您說，是不是比一片灰灰的好看多了呢！原始碼這是標題 這裡是本文區 呈現結果按下此處觀看結果3.背景圖案用法：g設定背景圖案。圖檔可以是jpg或gif格式的圖檔，我建議：圖檔不要太大，否則網頁載入會蠻慢的。原始碼這是標題 這裡是本文區 呈現結果按下此處觀看結果【內文、連結文字顏色設定】 1. 使用方法： 2. 標籤解說：用字體標籤中的顏色屬性，可以設定文字的顏色，不過，卻沒有提到文字的顏色內定值該如何修改，這個標籤中，便有設定內文、連結等文字的顏色內定值功能。用法如下： 內文顏色用法：設定一般文字顏色，也就是說，若沒有特別去設定文字顏色的話，瀏覽器就會自動顯現您所設定的顏色。原始碼這是標題 這裡是本文區 呈現結果按下此處觀看結果3.連結顏色用法：設定連結的顏色。只要是有連結的地方就會出現你指定的顏色，當然，如果按下連結後，那又會變成另一個顏色了，這底下會說明。原始碼這是標題 連結文字 呈現結果按下此處觀看結果（設定連結為橘色）4.連結時顏色用法：設定按下連結的顏色，也就是當您滑鼠按下那連結的瞬間所呈現的顏色。原始碼這是標題 連結中文字 呈現結果按下此處觀看結果（滑鼠點下連結瞬間才會出現我們設定的淺藍色）5.已連結顏色用法：設定按下鏈結後的顏色，也就是如果該連結已經有被按過了，那麼就會呈現的顏色。如此的做法，是要讓使用者容易識別到底哪些連結有去過了，哪些沒去過。原始碼這是標題 連結文字 呈現結果按下此處觀看結果（設定已執行過的連結以紅色顯示）1.8 連結標籤 【WWW連結標籤基本概念】 1. 連結基本概念：一般而言，所謂連結就是，在網頁中有些字會有特別的顏色，而且字的底下會有條線，當游標移到那些字上時，會變成手指形狀，按下去，則會連到別的文章或網站，就像這樣（以上這段是給超級新手看的.）。 扯到連結，最基本來看有內部連結及外部連結，所謂內部連結就是自己網站間網頁的連結，至於外部連結我們稍後再來討論。 要了解內部連結，首先必須先了解一下這兩種東西，一個是相對路徑，一個是絕對路徑。 現在假設一個情形：我們在自己的電腦裡設計網頁，所有網頁相關的檔案我們通通放在 c:www 裡面，現在假設 c:www 裡面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 這四個檔案。ok！ 現在我們想在 index.htm 裡面設一個連結，能夠按一下就連到 text1.htm，那我們該怎麼做呢？基本上，有兩中方式可以做到，在 index.htm 裡面加上下面任一敘述： 這就是絕對路徑這就是相對路徑瞧出什麼端倪了沒有？嗯嗯.沒錯，絕對路徑要給電腦一個非常詳盡的位置，讓電腦尋著這路徑去找到檔案。而相對路徑就簡單多啦！如果沒有特別指定，他就會直接在 index.htm 的所在目錄下找，也就是在 c:www 底下去找text1.htm。 如果說，今天我們將 c:www 裡所有的檔案都上傳到網路上的網頁伺服器（總不能做好了只給自己看吧！），且該伺服器是別人的電腦，而非你自己架設的主機，那麼問題就來了！你猜，哪一種連結會出問題？呵呵.答案是絕對路徑，您猜對了嗎？ 為什麼說絕對路徑會出問題呢？因為，當您將檔案上傳到網路上時，您的整個網頁目錄架構一定會變，到時候，電腦可能找不到 c: （尤其是unix系列的主機）更可能找不到 www 這目錄（有些會規定要放在特定的目錄下才能顯示網頁），所以說，沒事的話，盡量用相對路徑來作連結吧！好寫又不容易出錯。 另外一個情形是：為了整理方便，有些網友喜歡將圖檔通通放到同一個目錄下，如：c:wwwgif 底下放進了p1.gif 、 p2.gif兩個圖，而index.htm 、 text1.htm 依舊在 c:www 底下。現在我們想在 index.htm 下設個連結到 p1.gif 這圖檔（連結不限於只能連html檔，圖檔、文字檔均可），那我們又該如何來使用相對路徑呢？他們又不在同一個目錄下.？ 這是絕對路徑的寫法這是相對路徑的寫法如何？不難吧！（只是字有點多，看到腦子發脹） 2. 總整理：很亂嗎？嗯.看看這表，或許會清楚些。 相對路徑表示方式代表連結位置text1.htm在目前的目錄中（就例子而言，就是在c:www中）text1.htm在名為docs的次目錄中（就本例而言，就是在c:wwwdocs中）text1.htm在目前目錄的上一層目錄中（就本例而言，就是在c:底下了）【網頁內部的連結】 1. 使用方法： 1. 先在欲連結處作記號：這裡是你想連結的點 2. 設定連結：連結 2. 標籤解說：有時候，當某頁的內容很多時，我們可以利用網頁的內部連結，來使使用者快速的找到資料。其原理不過是：在欲連結處做個記號（網頁的任何地方都可以喔！），然後，連結時就尋這記號，就可以快速找到資料。很簡單吧！ 3. 使用範例： 範例第一步驟第二步驟www連結標籤基本概念欲連結的位置www連結標籤基本概念網頁內部的連結欲連結的位置網頁內部的連結網頁外部的連結欲連結的位置網頁外部的連結【網頁外部的連結】 1. 標籤解說：連結到外面去，可以擴充您網站的實用性及充實性，也正因這功能，才造就了www五彩繽紛的世界。由於網路上的服務五花八門，所以不同的服務有不同的連結方法，我將之整理在下表。 2. 使用範例： 網站連結好站好站電子郵件連結寫情書給我寫情書給我ftp連結下載檔案下載檔案news連結seednet news服務seednet news服務gopher連結seednet gopher服務seednet gopher服務bbs連結seednet gopher服務seednet bbs服務【連結標籤的參數】 1. 使用方法：在連結後面加入 target=_參數 2. 標籤解說：連結的參數並不多，常見的大概就屬 target 這參數了，target 的意思是目標，也就是網頁連結的指向目標，這參數在框窗（frame）裡尤為重要！ 3. 使用範例： o target=框窗名稱：這在框架標籤中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名稱，因此，我們可以利用此標籤，來指定連結的內容顯示到哪一個框窗中。 o target=_blank：將連結的畫面內容，開在新的瀏覽視窗中。 o target=_parent：將連結的畫面內容，當成文件的上一個畫面。 o target=_self：將連結的畫面內容，顯示在目前的視窗中。 o target=_top：這個參數可以解決新連結的畫面內容，被舊框窗包圍的困擾，使用這參數，會將整個畫面重新顯示成連結的畫面內容。 1.9 表格標籤 【網頁中的表格觀念】 舉個例子來說，如果今天我們要做一個3欄2列的表格，在WORD中，只要設定表格為3欄、2列就完成了，不過，在網頁中做一個3欄2列的表格，可是要分成好幾個步驟的，第一個步驟，利用標籤告訴電腦我要做一個表格；第二個步驟，利用一組標籤先做一個橫列，然後在橫列中利用三組標籤再分出三欄；第三個步驟，重複第二個步驟，再做一橫列然後再分三欄，如此才能得到一個3欄2列的表格。聽不太懂嗎？沒關係，以下咱們就來慢慢的看個仔細： 1. 首先我們來看一個最簡單的表格： 原始碼呈現結果 112. 利用這個標籤來告訴電腦，這是一個表格，至於 BORDER=1 這參數是設定此表格的框線粗細為 1。一組是設定一橫列的開始。一組則是設定一個欄位。當然，文字就是要擺在這裡面。 3. 現在我們再來增加二個格子： 原始碼呈現結果 1231234. 看見沒有，沒有增加，卻增加了二組。那如果我要再加上一列呢？很簡單，就像這樣： 原始碼呈現結果 123456123456【合併表格欄位】 1. 並非所有的表格都是規規矩矩的只有幾欄、幾列而已，有時候，我們還會希望能夠合併欄位，讓表格更美觀、更實用一點，而談到合併欄位，我們就必須知道，合併的方向有兩種：一種是上下合併（也就是橫列間的合併），一種是左右合併（也就是直欄間的合併），這兩種合併方式各有不同的屬性設定方法。 2. 左右欄位合併：基本上，您的表格已經學會囉！接下來，咱們就來看看，如何將 1、2、3 格通通合併變成一大格： 原始碼呈現結果 145614563. 您應該會發現，怎麼2、3都消失了？只剩下1，而且該欄的標籤還多了一個陌生的臉孔COLSPAN=3，沒錯，這就是左右欄位合併的屬性，COLSPAN=3的意思就是這個欄位左右橫跨了3個欄位，也正因如此，本來的兩個都可以省掉了，因為都被併掉了嘛！ 4. 上下欄位合併：學會了左右合併！接下來，咱們就來看看，如何上下合併，將 1、4格通通合併變成一大格： 原始碼呈現結果 12356123565. 有了上一次的經驗後，我們就知道，要合併欄位就一定有些欄位會被犧牲掉（也就是那些被合併的欄位啦！），這次我們要上下合併，我們將1與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，而在1的標籤中則多了個生面孔ROWSPAN，這就是上下欄位合併的屬性，ROWSPAN=2的意思就是這個欄位上下連跨了2個欄位，其結果如下： 【表格欄位對齊位置設定】 1. 我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的寬及高喔！我們來製作一個寬100、高60的表格，做法如下： 原始碼呈現結果 1 12. 哎呀！怎麼 1 老是在表格的左邊呢？可以弄到中間嗎？當然可以，只要在加入 ALIGN=CENTER 這參數即可： 原始碼呈現結果 1 13. 此外，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預設值），至於為什麼要加在中呢？因為，是一個欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在中。 4. 既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。 原始碼呈現結果 1 15. 利用VALIGN=MIDDLE可以讓表格中物件垂直置中（預設值），VALIGN=BOTTOM可以H讓表格中物件靠下方。 【表格背景、底色設定】 1. 那麼表格可以設定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR=顏色碼就行了。底下是指定整格表格背景顏色的方法： 原始碼呈現結果 1234 12342. 將BGCOLOR=顏色碼加在中，可以指定一列的背景顏色： 原始碼呈現結果 1234 12343. 將BGCOLOR=顏色碼加在中，可以指定一欄的背景顏色： 原始碼呈現結果 1234 12344. 表格除了可以設定底色外，也可以用圖片來作背景嗎？當然可以，方法一樣簡單，只要將BACKGROUND=圖片名稱加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，您也可以指定某欄或某列的背景圖片： 原始碼呈現結果 1234 12345. 將BACKGROUND=圖片名稱加在中，可以指定一欄的背景顏色： 原始碼呈現結果 1234 1234【表格框線設定】 1. 如何設定表格粗細？只要利用BORDER=粗細值就行了。 原始碼呈現結果 112. 如何設定表格顏色？只要利用BORDERCOLOR=顏色碼就行了。 原始碼呈現結果 113. 另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感喔！只要利用 BORDERCOLORLIGHT=#顏色碼（亮面設定） BORDERCOLORDARK=顏色碼（暗面設定）就行了。 原始碼呈現結果 11【表格欄距設定】 1. 我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離，這個屬性很好用，保持適當的距離，看起來比較舒服。一般而言內定值為2，不過我建議設定為4比較漂亮。 原始碼呈現結果 12122. 我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。一般而言內定值為2，不過我通常習