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

HTML Table 表格邊框顏色與樣式可以用 cssborder-widthborder-colorborder-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,即不顯示。分別替各個方向設計比較費時,但可以設計出獨具風格的邊框樣式。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C