修改 HTML Table 表格邊框顏色 - HTML 網頁設計筆記

修改 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 的奧義。