修改 HTML Table 表格的邊框顏色

HTML Table 表格的邊框顏色是可以修改的，雖然設計表格邊框的方式有很多種，但本篇以基本的 CSS 語法來修改，優點是簡單又快速，幾乎所有的主流瀏覽器都支援、語法很短，可以自己修改其他顏色或是調整邊框的粗細，甚至要變更邊框的樣式都可以，以下就是這次修改 HTML 表格邊框顏色的簡單範例語法，重點在語法第一行的 Table 標籤內容。

HTML Table 表格邊框顏色範例

呈現效果

表格內容 1	表格內容 2	表格內容 3
表格內容 4	表格內容 5	表格內容 6

範例一開始在 <table> 標籤內使用 style 來宣告要呈現的風格，重點來了，border 是 css 設計中用來控制邊框的語法，範例中 border 後方有三個參數，第一個參數 5px 代表 Table 的外邊框寬度是 5px，第二個參數 #cccccc 代表的是 Table 的外邊框顏色為灰色，如果要選擇其他的顏色，可以直接將 #cccccc 改為顏色的英文名稱，如紅色使用 red、藍色使用 blue、綠色使用 green ... 等，除此之外，也可以使用 Wibibi 的《色碼表》來挑選不同的色碼進行修改，第三個參數 solid 則是邊框的樣式為實線，也可以變更為其他樣式。

再來是 HTML Table 本身的表格功能，rules 代表內框線的顯示方式，像範例中這樣寫 rules="all" 代表的是全部顯示，如果都不要顯示就寫為 rules="none"，只要顯示水平線就寫為 rules="rows"，只要顯示垂直線就寫為 rules="cols"。接著看到 cellpadding 這個選項，代表的是表格內每個欄位的內距，數字越大代表內距越大，也就是文字距離邊框越遠，詳細的表格設計請參閱：HTML Table 表格設計。

延伸閱讀