修改 HTML Table 表格的邊框樣式

HTML Table 除了可以用來排版之外,當然也可以用來作一些資料呈現的表格,本篇提供幾種簡單的表格邊框樣式美化的範例,這些範例主要是透過 CSS 的 border-style 技巧呈現,有許多種不同的邊框樣式風格可以自己調整,例如實體線(solid)、虛線(dashed)、雙實線(double)、細虛線(dotted)... 等,表格邊框的顏色與粗細都可以自己調整出想要的風格。

HTML Table 表格的邊框樣式範例一、實線
<table  style="border:3px #FFAC55 solid;padding:5px;" 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
範例一使用的是實線,也就是範例語法中紅色標註的地方,若您想要了解 HTML Table 的語法規則,請參閱《HTML Table 表格設計》有詳細的解說,範例中 style 代表要開始使用 css 語法,裡面的 border 代表設定的是表格邊框,三個參數分別代表的意義解說,第一個參數 3px 是表格邊框粗細、第二個參數 #FFAC55 是邊框顏色(參閱 Wibibi 資料:色碼表)、第三個參數 solid 則是邊框的樣式(參閱 Wibibi 資料:CSS border-style 邊框樣式),這三個參數都可以自己修改,另外幾個功能說明如下。
  • padding - 表格內距
  • rules  - 表格內框線的顯示方式
  • cellpadding - 表格內每個欄位的內距
HTML Table 表格的邊框樣式範例二、虛線
<table  style="border:3px #FFAC55 dashed;padding:5px;" 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
同樣的技巧,範例二僅修改了邊框樣式為虛線 dasched,其他部分並未修改。

HTML Table 表格的邊框樣式範例一、雙實線
<table  style="border:3px #FFAC55 double;padding:5px;" 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
雙實線的樣式名稱為 double,如果想要使用其他更多的樣式,可以參閱 Wibibi 所提供《CSS border-style 邊框樣式》的各種樣式範例,看到這裡,相信您已經能夠掌握 HTML Table 表格邊框的樣式修改技巧了。

延伸閱讀
© Copyright webtech.tw Since 2010