修改 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