修改 HTML Table 表格的邊框顏色

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

HTML Table 表格邊框顏色範例
<table style="border:5px #cccccc solid;" rules="all" cellpadding='5';>
<tr><td>表格內容 1</td><td>表格內容 2</td><td>表格內容 3</td></tr>
<tr><td>表格內容 4</td><td>表格內容 5</td><td>表格內容 6</td></tr>
</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 表格設計

延伸閱讀
© Copyright webtech.tw Since 2010