一、作系列橫單線

　　這是系列橫單線試驗，效果還好吧？ 
　　在這個例子中，用到了表格主標題標記<caption>，它的語法如下：
<caption
align=left|center|right
valign=top|bottom>
　　align和valign分別用於設定標題的水平位置和垂直位置。align的預設值是center；valign的預設值是top。利用<caption>標記可以方便地在緊靠邊表格的頂部或底部寫上文字，且居中，若用其它辦法要麻煩得多。另外在本例中能使表格產生單線效果是設定了<table>標記的rules和frame引數，rules引數是對錶格的內部邊框作顯示控制。
rules="none"：表示不加內部邊框；
rules="rows"：表示只顯示水平方向的邊框； 
rules="cols：表示只顯示垂直方向上的邊框；
rules="all"：則是顯示所有方向上的邊框，這也是預設值；
frame="void"：表示不加外邊框；
frame="above"：表示顯示上邊的外邊框；
frame="below"：表示顯示下邊的外邊框；
frame="lhs" ：表示顯示左邊的外邊框；
frame="rls" ：表示顯示右邊的外邊框；
frame="hsides"：表示顯示上下外邊框；
frame="vsides"：表示顯示左右外邊框；
frame="box" 則表示顯示所有外邊框。
　　明白了引數值的含義，製作本例的效果就簡單了，本例完成後的原始碼如下：
<table width="60%" border="1" cellspacing="0" cellpadding="0" rules="rows" frame="hsides">
<caption>這是系列橫單線試驗</caption>
<tr> 
<td> 這是系列橫單線試驗，效果還好吧？</td>
</tr>
<tr> 
<td> </td>
</tr>
<tr> 
<td> </td>
</tr>
</table> 
　　用這種方法畫系列單線，即快又整齊，且所用程式碼也很少。

　　二、作系列豎單線

　　本例這種效果看起來是不是有點特色，其實在製作方法上與上例沒有多少區別，只是改變了rules和frame的引數值，使表格只顯示垂直方向的內外邊框，其它與上例相同，本例完成後的原始碼是：
<table border="1" cellspacing="1" cellpadding="8" rules="clos" frame="vsides" height="115" align="left" hspace="10" width="180">
<tr>
<td>更上一 層 樓 </td>
<td>欲窮千 裡 目 </td>
<td>黃河 入 海 流 </td>
<td>白日依 山 盡 </td>
<td><p><br>登 黃 鶴 樓 </p></td>
</tr>
</table>

　　三、系列雙橫線

　　這是在例一的基礎上再增加設定了cellspacing引數所產生的效果。
　　本例採用與例一相同的方法，通過設定rules和frame引數，使表格只顯示水平方向的內外邊框線，並增加了設定cellspacing引數使其產生雙線效果，但是<table>標記預設的雙線顏色不一樣（因它的本意是用兩種顏色來產生立體效果的），所以又通過設定bordercolorlight和bordercolordark 引數來改變雙線的顏色，以達到雙線顏色一致的目的。另外為了使表格內的文字內容上下留空，又設定了cellpadding引數，當然也可以通過設定單元格高度來達到這個目的，但那樣要增加許多程式碼。下面介紹這幾個引數的含義：
cellspacing="n"：單元格間距，也就是內外邊框線的間距；
cellpadding="n"：單元格邊距，即單元格內內容與內邊框的距離；
bordercolorlight="#n"：設定立體邊框線中較淺部分的顏色，用顏色名稱或十六進位制數表示。
bordercolordark="#n"：設定立體邊框線中較深部分的顏色，用顏色名稱或十六進位制數表示。 
　　用本例的方法制作雙橫線，比用其它方法方便、快捷，所用程式碼也較少，當橫線的數量越多，效果越明顯。本例完成後的程式碼為：
<table width="60%" border="1" cellspacing="6" cellpadding="3" bordercolorlight="#006633" bordercolordark="#006633" rules="rows" frame="hsides">
<tr><td> 這是在例一的基礎上再增加設定了cellspacing引數所產</td></tr>
<tr><td>生的效果。</td></tr>
<tr><td> </td></tr>
</table>

　　同樣，在例二的基礎上再加上例三的方法就可以方便地製作出雙豎線效果，你可以試試。當然表格在網頁製作中的作用遠遠不止這些，通過這三個例子可以看出，靈活應用表格的引數設定，可以產生一些特殊效果。

HTML表單設計基礎　

表單在HTML頁面中起著重要作用，它是與使用者互動資訊的主要手段。一個表單至少應該包括說明性文字、使用者填寫的表格、提交和重填按鈕等內容。使用者填寫了所需的資料之後，按下“提交資料”按鈕，這樣所填資料就會通專門的CGI介面傳到Web伺服器上。網頁的設計者隨後就能在Web伺服器上看到使用者填寫的資料，從而完成了從使用者到作者之間的反饋和交流。對於免費個人網站，往往伺服器不提供CGI功能，也可以電子郵件來接收使用者的反饋資訊。
　　表單中主要包括下列元素：
button——普通按鈕
radio ——單選按鈕
checkbox——複選框
select ——下拉式選單
text ——單行文字框
textarea——多行文字框
submit——提交按鈕
reset—— 重填按鈕
　　用HTML設計表單常用的標記是：<form>、< input>、<Option>、<Select>、<textarea>和<isindex>等標記。

1、<form>表單標記
　　該標記的主要作用是設定表單的起止位置，並指定處理表單資料程式的url地址。其基本語法結構如下：
<form
action＝url
method=get|post
name＝value
onreset=function
onsubmit＝function
target=window>
</form>
　　其中action：用於設定處理表單資料程式url的地址。這樣的程式通常是CGI應用程式，採用電子郵件方式時，用action="mailto:

[email protected]"。
method：指定資料傳送到伺服器的方式。有兩種主要的方式，當method=get時，將輸入資料加在action指定的地址後面傳送到伺服器；當method=post時則將輸入資料按照HTTP傳輸協議中的post傳輸方式傳送到伺服器，用電子郵件接收使用者資訊採用這種方式。
name：用於設定表單的名稱。onrest和onsubmit是主要針對“reset”按鈕和“submit”按鈕來說的，分別設定了在按下相應的按鈕之後要執行的子程式。
target：指定輸入資料結果顯示在那個視窗，這需要與<frame>標記配合使用。

2、<input>表單輸入標記
　　此標記在表單中使用頻繁，大部分表單內容需要用到此標記。其語法如下：
<inPut
aligh=left|righ|top|middle|bottom
name=value
type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onclick=function
onselect=function>
align：是用於設定表單的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）還是靠底（bottom）。
name：設定當前變數名稱。 
type：決定了輸入資料的型別。其選項較多，各項的意義是： 
type=text：表示輸入單行文字； 
typet=textarea：表示輸入多行文字；
type=password:表示輸入資料為密碼，用星號表示；
type－checkbox：表示複選框；
type－radio：表示單選框；
type一submit：表示提交按鈕，資料將被送到伺服器； 
tyPe－reset：表示清除表單資料，以便重新輸入；
type－file：表示插入一個檔案；
type－hidden：表示隱藏按鈕；
type＝image：表示插入一個影象；
type一button：表示普通按鈕；
value：用於設定輸入預設值，即如果使用者不輸入的話，就採用此預設值；
src：是針對type=image的情況來說的，設定影象檔案的地址；
checked：表示選擇框中，此項被預設選中；
maxlength：表示在輸入單行文字的時候，最大輸入字元個數；
size：用於設定在輸入多行文字時的最大輸入字元數，採用width，height方式；
onclick：表示在按下輸入時呼叫指定的子程式；
onselect：表示當前項被選擇時呼叫指定的子程式。 

3、<select>下拉選單標記
　　用<select>標記可以在表間中插入一個下拉選單，它需與<option>標記聯用，因為下拉選單中的每個選項要用<option>標記來定義。<select>標記的語法如下：
<select
name=nametext
size=n
multiple>
　　其中name：設定下拉式選單的名稱；
size：設定選單框的高度，也就是一次顯示幾個選單項，一般取預設值（size="1"）；
multiple：設定為可以進行多選。

4、<option>選項標記
　　該標記為下拉選單中一個選項，語法很簡單：
<option
selected
value=value>
其中selected：表示當前項被預設選中；
value：表示該項對應的值，在該項被中之後，該項的值就會被送到伺服器進行處理。

5、<textarea>多行文字輸入標記
　　這是一個建立多行文字輸入框的專用標記，其語法如下：
<textarea
name=name
cols=n
rows=n
wrap=off|hard|soft>
　　各引數含義：name：文字框名稱；clos：寬度；rows：高度（行數）；wrap：換行控制，off：不自動換行；hard：自動硬回車換行，換行標記一同被傳送到伺服器中去；soft：自動軟回車換行，換行標記不會傳送到伺服器中去。 
　　表單所涉及的標記較多，引數也較複雜，而實際製作表單時就是這些標記的組合應用，但一般的表單不可能涉及所有引數，我們還是那個原則，能用預設值的儘量用預設值，絕不設定一個不用的引數。我在後面的文章中將通過例項介紹一些常用引數的應用技巧。

用好HTML表單的文字框

表單的文字框分為單行文字框和多行文字框，故名思義，單行文字框用於輸入一些簡短的資訊，如：姓名、E_mail地址、口令等等；多行文字框用於輸入內容較長的資訊，如：使用者意見、評論、留言等。只要你理解了表單的文字框引數的含義，製作接收資訊的文字框是不難的，請看下面的例子。