close

【 表格欄位對齊位置設定 】


1. 首先我們來看一個最簡單的表格:










原始碼呈現結果






1





1


2. 利用

這個標籤來告訴電腦,這是一個表格,


至於 BORDER=1 這參數是設定此表格的框線粗細為 1。


一組

是設定一橫列的開始。一組

則是設定一個欄位。



當然,文字就是要擺在這裡面。


3. 現在我們再來增加二個格子:











原始碼呈現結果








123







123


4. 看見沒有, 沒有增加, 卻增加了二組。


那如果我要再加上一列呢?很簡單,就像這樣:










原始碼呈現結果













123
456











123
456


 


【 合併表格欄位 】


1. 並非所有的表格都是規規矩矩的只有幾欄、幾列而已,


有時候,我們還會希望能夠「合併欄位」,讓表格更美觀、更實用一點,


而談到「合併欄位」,我們就必須知道,合併的方向有兩種:


一種是上下合併(也就是橫列間的合併),


一種是左右合併(也就是直欄間的合併),


這兩種合併方式各有不同的屬性設定方法。



2. 左右欄位合併:基本上,您的表格已經學會囉!


接下來,咱們就來看看,如何將 1、2、3 格通通合併變成一大格:










原始碼呈現結果











1
456









1
456


您應該會發現,怎麼2、3都消失了?


只剩下1,而且該欄的 標籤還多了一個陌生的臉孔COLSPAN="3",


沒錯,這就是「左右欄位合併」的屬性,


COLSPAN="3"的意思就是「這個欄位左右橫跨了3個欄位」,


也正因如此,本來的兩個 都可以省掉了,因為都被併掉了嘛!



3. 上下欄位合併:學會了左右合併!接下來,咱們就來看看,如何上下合併,


將 1、4格通通合併變成一大格:










原始碼呈現結果












123
56










123
56


有了上一次的經驗後,我們就知道,


要合併欄位就一定有些欄位會被「犧牲」掉(也就是那些被合併的欄位啦!),


這次我們要「上下合併」,我們將1與4合併成一個欄位,那麼被犧牲的是哪一個欄位呢?


沒錯就是下面那一個倒楣的4,我們看看上圖,果然4已經刪掉了,


而在1的 標籤中則多了個生面孔ROWSPAN,這就是「上下欄位合併」的屬性,


ROWSPAN=2 的意思就是「這個欄位上下連跨了2個欄位」


 


【 表格欄位對齊位置設定 】


1. 我可以自己設定表格的大小嗎?當然可以,您可以自由設定表格的「寬」及「高」喔!


我們來製作一個寬100、高60的表格,做法如下:










原始碼呈現結果






1





1


2. 哎呀!怎麼 1 老是在表格的左邊呢?可以弄到中間嗎?


當然可以,只要在 加入 ALIGN=CENTER 這參數即可:










原始碼呈現結果






1





1


此外,利用 ALIGN=RIGHT可以讓表格中物件置右、


利用 ALIGN=LEFT可以讓表格中物件置左(預設值),至於為什麼要加在 中呢?


因為, 是一個欄位的意思,我們要指定在這欄位中的東西要置中或置左置右,


就必須將ALIGN加在 中。


3. 既然可以置中,那麼也可以控制表格內文字靠上方、靠下方嗎?


可以的,只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。










原始碼呈現結果






1





1


利用VALIGN=MIDDLE可以讓表格中物件垂直置中(預設值),


VALIGN=BOTTOM可以H讓表格中物件靠下方。


 


【 表格背景、底色設定 】


1. 表格可以設定底色嗎?


可以的不但表格可以,您也可以指定某欄或某列的顏色,


方法和加背景顏色一樣,利用BGCOLOR="顏色碼"就行了。


底下是指定整格表格背景顏色的方法:











原始碼呈現結果











12
34









12
34



將BGCOLOR="顏色碼"加在 中,可以指定「一列」的背景顏色:











原始碼呈現結果











12
34









12
34



將BGCOLOR="顏色碼"加在 中,可以指定「一欄」的背景顏色:











原始碼呈現結果











12
34









12
34



2. 表格除了可以設定底色外,也可以用圖片來作背景嗎?


當然可以,方法一樣簡單,只要將BACKGROUND="圖片名稱" 加到表格中就行了。


和表格背景顏色一樣,不但表格可以設定背景圖片,


您也可以指定某欄或某列的背景圖片:










原始碼呈現結果











12
34









12
34


將BGCOLOR="顏色碼"加在 中,可以指定「一欄」的背景顏色:










原始碼呈現結果











12
34









12
34


 


【 表格框線設定 】


1. 如何設定表格粗細?只要利用BORDER="粗細值"就行了。










原始碼呈現結果






1





1


2. 如何設定表格顏色?只要利用BORDERCOLOR="顏色碼"就行了。










原始碼呈現結果






1





1


3. 另外,我們也可以設定表格的陰影、亮面顏色,讓表格看起來更有立體感喔!


只要利用 BORDERCOLORLIGHT="#顏色碼"(亮面設定)


BORDERCOLORDARK="顏色碼"(暗面設定)就行了。










原始碼呈現結果






1





1


 


【 表格欄距設定 】


1. 我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離,


這個屬性很好用,保持適當的距離,看起來比較舒服。


一般而言內定值為2,建議設定為4比較漂亮。










原始碼呈現結果







12






12


2. 我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。


一般而言內定值為2,通常習慣設為 0 。










原始碼呈現結果







12






12



arrow
arrow
    全站熱搜
    創作者介紹
    創作者 小魔女 的頭像
    小魔女

    小魔女的部落格

    小魔女 發表在 痞客邦 留言(0) 人氣()