修改 HTML Table 表格邊框顏色

修改 HTML Table 表格邊框顏色可以修改嗎?答案是可以的,不過與修改表格背景顏色不太一樣,這裡我們用 css 的邊框修改方式來處理,優點是可以同時修改表格邊框的顏色、粗細以及樣式,三個願望一次滿足 ^^,而且各家瀏覽器對於 css 的支援也相當完善。修改表格邊框顏色常常可以帶來相當優異的質感,就像是讓 HTML 表格穿上新衣服一樣,以下就用一個有六個欄位的表格來做範例。

修改 HTML Table 表格邊框顏色範例語法
呈現效果
表格欄位 1表格欄位 2表格欄位 3
表格欄位 4表格欄位 5表格欄位 6
我們在範例表格的開頭 table 標籤內使用了幾個屬性,包含有 css 的 style、table 本身的 rules、cellpadding 等,跟修改表格邊框最有關係的是 style 內的 border 語法,其他的 rules、cellpadding 都只是輔助讓範例呈現更清楚而已。

如果不知道表格本身的設計規格,可以看這篇:HTML 表格設計篇 TABLE

來看看這個 style 內容,「border:6px yellow solid」的意思代表表格邊框粗細是 6px、顏色要黃色(yellow)、樣式為實線(solid),其實範例的 style 的內容就足以讓表格呈現黃色粗實線的邊框效果,rules 代表的是表格內欄位的分隔線,這裡寫「rules="all"」意思是全部都要呈現,假設只要出現橫線,請寫成「rules="rows"」,又或者只要呈現垂直線,就寫成「rules="cols"」這樣,最後那個 cellpadding 是欄位內容與邊框的距離。

若要更換別的顏色可以使用 Wibibi 上的這個:色碼表

根據以上範例的解說,應該可以理解如何修改 HTML Table 表格邊框的顏色,有時間的話自己開一個空白文件,把範例中的邊框顏色、粗細稍做修改看看結果,這樣比較能熟悉,想要學點其他的技巧,可以參考這幾篇。
學習 HTML 語法最好的方式就是自己練習,從中發現 HTML 的奧義。
分享於 2014-07-22