對 HTML 有點認識的朋友應該知道當建立一個包含 Table 的網頁時，必須使用 cellpadding, cellspacing, border, align 等屬性來設定 Table 的外觀，可是如果使用上述的屬性，即代表必須把屬性直接加入在 HTML Tag 內，而不能放在一個外部的 css 文件中，不合乎把設計和內容分開的原則。其實 Table 亦可以用 css 來設定外觀，只不過網頁設計軟件都沒有加入此功能。
首先要澄清一點，以往多次討論網頁設計時，都強調不要使用 Table Tags 作排版，其實並非指 Table 是萬惡，Table 的正確用法是放置需要一行行、一列列的儲存格表達的資料。因此 Table Tags 是合法和有用途的指令。
有一點比較可惜的是，IE 直到最新的 IE7，仍然是不支援 border-spacing 這一 css 屬性，這屬性和 cellspacing 的功能有點像，不過以我的經驗，很多時製作網頁時都會把 cellspacing 設為 0，而剛好 IE 對此是支援的。
Table 整體外觀
設定 table width 和 border 就最簡單，只要在css設定相對 element 的 width 及 border 就可以，而只要設定 border-collapse style 為 collapse (即會盡量把框線重疊，顯示為一條)，亦會使 Table 的 “cellspacing” 設為 0。而如果想把 Table 居中，只要設定 margin 就可以。
-
-
.my-table {
-
-
font-size: 16px;
-
border:1px solid black; <!–可進一步設定框線的顏色及式樣–>
-
border-collapse: collapse;
-
width:400px;
-
margin:0 auto; <!–表格居中–>
-
}
-
有一點要注意，如果在 Table Tag 的 css 設定 border，則只會設定四邊的框線，而非儲存格內的框線。
儲存格外觀
cellpadding 這一個重要的 Table 屬性如何設定，其實大家可能都想到，就是設定儲存格的 padding 屬性。當然你也可以加入一個自訂的 class，來設定某一行或某一列的 width, height, background color 和 padding。
-
-
.my-table td {
-
padding:10px; <!–設定 cellpadding –>
-
border:1px solid black; <!–可進一步設定框線的顏色及式樣–>
-
width:110px;
-
text-align:center; <!–居中–>
-
vertical-align:top; <!–垂直居中–>
-
}
-
示範例子 (請檢視例子的原始檔)
如果有需要設定 cellspacing 時，可以怎麼做呢？辦法是用一個 IE 才支援的 css 屬性 expression。
-
-
table {
-
border-collapse: separate; <!– 分開顯示框線，不會重疊–>
-
border-spacing: 5px;
-
*border-collapse: expression(’separate’, cellSpacing = ‘5px’);
-
}
-
留言
寫下留言