實用進階語法

第四篇
教您進階使用圖檔及表格 HTML 語法

適合程度： 初學者 一般程度 進階者 以上均宜
壹、運用說明：
我們都知道：在網路上圖檔是越小越好，加了表格您就可以把大圖變小了。
我們都知道：表格不能畫出圓形或不對稱欄與列位，可是但加了圖檔就可以了。
簡單的圖檔及表格很容易製作，但是複雜的圖檔及表格就不簡單了。
這一期我特別介紹幾個有意思的圖檔表格給大家參考，希望您能舉一反三，做出更多有創意的圖檔表格。

貳、圖檔基本HTML語法：
基本架構：<IMG SRC="路徑\圖案名稱.附檔名 相關屬性....">
相關屬性：(可任選擇或不依序使用)
ALT="給圖片的註解文字"。
BORDER="N" 圖檔邊框值，0表示無邊框。
WIDTH="PIXELS" 圖檔寬度值，單位像素。
HEIGHT="PIXELS" 圖檔高度值，單位像素。
ALING="TOP、MIDDLE、BOTTOM、LEFT、RIGHT" 圖檔水平排列方式。
HSPACE="PIXELS"(左右)， 圖檔周邊左右空隙值，單位像素，H=水平 (Horizontal)。
VSPACE="PIXELS"(上下)， 圖檔周邊上下空隙值，單位像素，V=垂直 (Vertical)。

參、表格基本 HTML 語法：
基本架構：<TABLE><TR><TD>文字或圖片</TD></TR></TABLE>
其他標籤：
列位<TR>...</TR>、標題欄位<TH>...</TH>、標題<CAPTION>...</CAPTION>
<TABLE>...</TABLE>內常用屬性計有：
BORDER="N" 表格邊框值，0表示無邊框，數字越大框線越粗。
CELLSPACING="N" 表格框線粗細，"N"表示粗細值，單位像素。
CELLPADDING="N" 表格內資料內容與四周邊的空隙，"N"表示空隙值，單位像素。
WIDTH="N" 表格寬度值，單位像素。
HEIGHT="N" 表格高度值，單位像素。
ALIGN="L/C/R" 表格水平排列方式。
註：L = LEFT C = CENTER R = RIGHT (以下同)
BGCOLOR="RGB/COLOR" 表格底色值。
註：RGB = RED GREEN BLUE COLOR = ENGLISH COLOR NAME (以下同)
BORDERCOLOR="RGB/COLOR" 表格邊框顏色值。
BACKGROUND="URL" 表格背景圖檔路徑\圖案名稱.附檔名。
BORDERCOLORDARK="RGB/COLOR" 表格框線顏色值 (IE Only)。
BORDERCOLORLIGHT="RGB/COLOR" 表格框線顏色值 (IE Only)。
<CAPTION>...</CAPTION>屬性計有(較少用)：
ALIGN="L/C/R" 標題水平排列方式。
VALIGN="T/B" 標題垂直(上下)存放位置(IE Only)。
註：T = TOP B = BOTTOM (以下同)
列位<TR>...</TR>內常用屬性計有：
HEIGHT="N" 表格列位高度值，單位像素。
ALIGN="L/C/R" 表格列位水平排列方式。
VALIGN="T/M/B" 表格列位垂直(上下)存放位置。
註：T = TOP M = MIDDLE B = BOTTOM (以下同)
BGCOLOR="RGB/COLOR" 表格列位底色值。
欄位<TD>...</TD>內常用屬性計有：
WIDTH="N" 表格欄位寬度值，單位像素。
HEIGHT="N" 表格欄位高度值，單位像素。
BGCOLOR="RGB/COLOR" 表格欄位底色值。
BACKGROUND="URL" 表格欄位背景圖檔路徑\圖案名稱.附檔名。
ALIGN="L/C/R" 表格欄位水平排列方式。
VALIGN="T/M/B" 表格欄位垂直(上下)存放位置。
COLSPAN="N" 表格欄位的合併，"N"表示向右合併欄位的數目。
ROWSPAN="N" 表格列位的合併，"N"表示向下合併列位的數目。
NoWrap 命令資料格內所存放的文字不會斷行。
標題欄<TH>...</TH>內常用屬性計有：
WIDTH="N" 表格標題列位高度值，單位像素。
HEIGHT="N" 表格標題欄位高度值，單位像素。
BGCOLOR="RGB/COLOR" 表格標題欄位底色值。
BACKGROUND="URL" 表格標題欄位背景圖檔值。
ALIGN="L/C/R" 表格標題欄位水平排列方式。
VALIGN="T/M/B" 表格標題欄位垂直(上下)存放位置。
COLSPAN="N" 表格標題欄位的合併，"N"表示向右合併欄位的數目。
ROWSPAN="N" 表格標題列位的合併，"N"表示向下合併列位的數目。
NoWrap 命令標題資料格內所存放的文字不會斷行。
表格標籤英文原文：
TH => Table Header、TR => Table Row、TD => Table Data、VAlign => Verticale Align

肆、圖檔可放在表格內的那些位置及其他技巧：
<TABLE BACKGROUND="URL">
註：URL = 圖檔路徑\圖案名稱.附檔名 (以下同)
<TD BACKGROUND="URL">
<TD><IMG SRC="路徑\圖案名稱.附檔名 相關屬性...."></TD>內
表格結束標籤</TD></TR>，收尾不要省略，IE 與 NC 有些不一樣，請注意哦！
利用表格的 CELLSPACING="0" CELLPADDING="0"，可製作無縫接圖。
設計表格之初，Border 值最好先設為 "1"，等表格修正完成後再改為 "0"。
網頁也可運用一些技巧，做出純表格變化花樣。
表格可作巢狀包覆使用，也可插入任何網頁元件，其內也可含蓋其他標籤。
大多數的表格標籤屬性，若無設定相關參數時，會以內定值顯示。
如 TD="Left"、TH="Center"、ALIGN="Left"、BORDER="0"、CELLSPACING="2"、CELLPADDING="1"。
標籤的對稱使用也是很重要，由外往內或由內往外都可以，但是不可交叉使用；
正確：<Tr><Td>...</Td></Tr>；錯誤：<Tr><Td>...</Tr></Td>。

伍、用單一圖檔製作成列印表紙型：
只要一張底圖，就可以用表格把它做的如此特別。

陸、用單一圖檔製作成立體型佈告欄：
這也是一張底圖，加些文字就可以用表格把它做的如此特別。

柒、用單一圖檔製作成可愛型表單：
這只是一張大的底圖加上簡單的表單表格，就可以用把它做的如此可愛。

捌、用上下兩張圖檔製作成外框型表單：
這是利用一張底圖，放於表格上下兩端，就可以用把它做的如此實用。

玖、用幾張角圖檔製作成立體型表單：
這是利用四張角圖檔及兩種背景顏色，就可以用把訂閱表單做的如此逼真。
如果您想取得更多完整電子報內所有檔案資料，我們提供燒錄光碟片給您 Go 。
凡加入教學或教材會員者，均可獲得以下乙份完整的資料光碟。
詳細內容：語法教學、第一電子報、第二電子報、第三期電子報、網頁圖窟。

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會HTML語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。