對(duì)于表格,是網(wǎng)頁(yè)制作中的重頭戲,一些圖形化網(wǎng)頁(yè)制作工具(如:Dreamweaver、Fontpage等)對(duì)它也支持的非常好,但HTML為表格設(shè)置了幾十個(gè)參數(shù),圖形化網(wǎng)頁(yè)制作工具要對(duì)它全面支持就有點(diǎn)免為其難了。由于參數(shù)太多,且大部分參數(shù)大家也比較熟悉,就不在這里一一介紹了,下面的例子中僅對(duì)一些關(guān)鍵性參數(shù)作詳細(xì)介紹。
一、作系列橫單線 在這個(gè)例子中,用到了表格主標(biāo)題標(biāo)記<caption>,它的語(yǔ)法如下: <caption align=left|center|right valign=top|bottom> align和valign分別用于設(shè)定標(biāo)題的水平位置和垂直位置。align的默認(rèn)值是center;valign的默認(rèn)值是top。利用<caption>標(biāo)記可以方便地在緊靠邊表格的頂部或底部寫(xiě)上文字,且居中,若用其它辦法要麻煩得多。另外在本例中能使表格產(chǎn)生單線效果是設(shè)置了<table>標(biāo)記的rules和frame參數(shù),rules參數(shù)是對(duì)表格的內(nèi)部邊框作顯示控制。 rules="none":表示不加內(nèi)部邊框; rules="rows":表示只顯示水平方向的邊框; rules="cols:表示只顯示垂直方向上的邊框; rules="all":則是顯示所有方向上的邊框,這也是默認(rèn)值; frame="void":表示不加外邊框; frame="above":表示顯示上邊的外邊框; frame="below":表示顯示下邊的外邊框; frame="lhs" :表示顯示左邊的外邊框; frame="rls" :表示顯示右邊的外邊框; frame="hsides":表示顯示上下外邊框; frame="vsides":表示顯示左右外邊框; frame="box" 則表示顯示所有外邊框。 明白了參數(shù)值的含義,制作本例的效果就簡(jiǎn)單了,本例完成后的源代碼如下: <table width="60%" border="1" cellspacing="0" cellpadding="0" rules="rows" frame="hsides"> <caption>這是系列橫單線試驗(yàn)</caption> <tr> <td> 這是系列橫單線試驗(yàn),效果還好吧?</td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> 用這種方法畫(huà)系列單線,即快又整齊,且所用代碼也很少。
二、作系列豎單線 本例這種效果在制作方法上與上例沒(méi)有多少區(qū)別,只是改變了rules和frame的參數(shù)值,使表格只顯示垂直方向的內(nèi)外邊框,其它與上例相同,本例完成后的源代碼是: <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>
三、系列雙橫線 這是在例一的基礎(chǔ)上再增加設(shè)定了cellspacing參數(shù)所產(chǎn)生的效果。通過(guò)設(shè)定rules和frame參數(shù),使表格只顯示水平方向的內(nèi)外邊框線,并增加了設(shè)定cellspacing參數(shù)使其產(chǎn)生雙線效果,但是<table>標(biāo)記默認(rèn)的雙線顏色不一樣(因它的本意是用兩種顏色來(lái)產(chǎn)生立體效果的),所以又通過(guò)設(shè)定bordercolorlight和bordercolordark 參數(shù)來(lái)改變雙線的顏色,以達(dá)到雙線顏色一致的目的。另外為了使表格內(nèi)的文字內(nèi)容上下留空,又設(shè)定了cellpadding參數(shù),當(dāng)然也可以通過(guò)設(shè)定單元格高度來(lái)達(dá)到這個(gè)目的,但那樣要增加許多代碼。下面介紹這幾個(gè)參數(shù)的含義: cellspacing="n":?jiǎn)卧耖g距,也就是內(nèi)外邊框線的間距; cellpadding="n":?jiǎn)卧襁吘啵磫卧駜?nèi)內(nèi)容與內(nèi)邊框的距離; bordercolorlight="#n":設(shè)定立體邊框線中較淺部分的顏色,用顏色名稱或十六進(jìn)制數(shù)表示。 bordercolordark="#n":設(shè)定立體邊框線中較深部分的顏色,用顏色名稱或十六進(jìn)制數(shù)表示。 用本例的方法制作雙橫線,比用其它方法方便、快捷,所用代碼也較少,當(dāng)橫線的數(shù)量越多,效果越明顯。本例完成后的代碼為: <table width="60%" border="1" cellspacing="6" cellpadding="3" bordercolorlight="#006633" bordercolordark="#006633" rules="rows" frame="hsides"> <tr><td> 這是在例一的基礎(chǔ)上再增加設(shè)定了cellspacing參數(shù)所產(chǎn)</td></tr> <tr><td>生的效果。</td></tr> <tr><td> </td></tr>
同樣,在例二的基礎(chǔ)上再加上例三的方法就可以方便地制作出雙豎線效果,你可以試試。當(dāng)然表格在網(wǎng)頁(yè)制作中的作用遠(yuǎn)遠(yuǎn)不止這些,通過(guò)這三個(gè)例子可以看出,靈活應(yīng)用表格的參數(shù)設(shè)定,可以產(chǎn)生一些特殊效果。
|
溫馨提示:喜歡本站的話,請(qǐng)收藏一下本站!