HTML Table 表格邊框顏色與樣式設計

HTML Table 表格邊框顏色與樣式可以用 css 的 border-width、border-color 與 border-style 三種屬性來設計，也可以直接使用 css border 邊框屬性一次直接寫完，語法更簡潔且容易維護，一般普通的情況，表格的四個邊框幾乎都是一樣的顏色，僅有少數的時候會需要替四個不同方向設計不同的邊框，無論是哪一種情況，css 都可以做得到，本篇介紹將提供幾個不同的範例，讓各位讀者看到不同的 HTML 表格邊框設計方式，這些範例幾乎所有主流的瀏覽器都支援。

HTML Table 表格邊框顏色與樣式設計範例一、四個邊框相同

<table style="border:3px #cccccc solid;" cellpadding="10" border='1'>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
</table>

<table style="border:3px #FFD382 dashed;" cellpadding="10" border='1'>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
</table>

<table style="border:8px #FFD382 groove;" cellpadding="10" border='0'>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
</table>

呈現效果

這是表格欄位	這是表格欄位
這是表格欄位	這是表格欄位

這是表格欄位	這是表格欄位
這是表格欄位	這是表格欄位

這是表格欄位	這是表格欄位
這是表格欄位	這是表格欄位

範例一提供了兩種不同邊框顏色與樣式的表格，可以看到差異主要在 table 開頭標籤內的 border 設定，其他如 cellpadding 與 HTML 本身的 border 都只是要讓範例比較清楚而已。請注意、css 的 border 與 HTML 預設的 table border 不一樣，HTML 的 border 代表所有的框線而不是邊框，前兩個表格 border="1" 代表所有表格的框線都是 1，第三個表格的 border='0' 代表所有框線都是 0，所以各欄位間的框線也消失，若要進一步研究 HTML 表格設計的規則，請參閱這一篇：HTML table 表格。

在範例一中，我們都沒有使用到 border-color 或 border-style 獨立的寫法，若您對 css border 本身的框線設計技巧或各種效果的獨立寫法有興趣，這幾篇值得研究。

看完範例一的介紹，對於表格的四個邊框設計應該有所概念，範例二是不同邊框的設計方式，請繼續閱讀。

HTML Table 表格邊框顏色與樣式設計範例二、不同的邊框效果

<table style="border-top:3px #FFD382 solid;border-bottom:3px #82FFFF solid;" cellpadding="10" border='0'>
<tr><td>這是表格欄位</td><td>這是表格欄位</td></tr>
</table>

呈現效果

這是表格欄位

範例二中使用了 css border 設計上邊框與下邊框的語法，其中 border-top 用來設計上邊框，而 border-bottom 則用來設計下邊框，css 的四個邊框各有不同的表示方式，在需要獨立修改某個邊框的時候非常實用。

border-top ← 用來設計上邊框。
border-right ← 用來設計右邊框。
border-bottom ← 用來設計下邊框。
border-left ← 用來設計左邊框。

範例二只設計了上邊框以及下邊框的風格，所以左邊框與右邊框都是沒有顯示的，所以用 css border 屬性來設計表格邊框，有寫出來的才會顯示，沒寫出來的邊框預設為 none，即不顯示。分別替各個方向設計比較費時，但可以設計出獨具風格的邊框樣式。

延伸閱讀