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

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

HTMLTable表格邊框顏色與樣式設計範例一、四個邊框相同 這是表格欄位 這是表格欄位 這是表格欄位 這是表格欄位 這是表格欄位 這是表格欄位 這是表格欄位 這是表格欄位 這是表格欄位 這是表格欄位 這是表格欄位 這是表格欄位 呈現效果這是表格欄位這是表格欄位這是表格欄位這是表格欄位這是表格欄位這是表格欄位這是表格欄位這是表格欄位這是表格欄位這是表格欄位這是表格欄位這是表格欄位範例一提供了兩種不同邊框顏色與樣式的表格，可以看到差異主要在table開頭標籤內的border設定，其他如cellpadding與HTML本身的border都只是要讓範例比較清楚而已。

請注意、css的border與HTML預設的tableborder不一樣，HTML的border代表所有的框線而不是邊框，前兩個表格border="1"代表所有表格的框線都是1，第三個表格的border='0'代表所有框線都是0，所以各欄位間的框線也消失，若要進一步研究HTML表格設計的規則，請參閱這一篇：HTMLtable表格。

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

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

HTMLTable表格邊框顏色與樣式設計範例二、不同的邊框效果 這是表格欄位 這是表格欄位 呈現效果這是表格欄位這是表格欄位範例二中使用了cssborder設計上邊框與下邊框的語法，其中border-top用來設計上邊框，而border-bottom則用來設計下邊框，css的四個邊框各有不同的表示方式，在需要獨立修改某個邊框的時候非常實用。

border-top←用來設計上邊框。

border-right←用來設計右邊框。

border-bottom←用來設計下邊框。

border-left←用來設計左邊框。

範例二只設計了上邊框以及下邊框的風格，所以左邊框與右邊框都是沒有顯示的，所以用cssborder屬性來設計表格邊框，有寫出來的才會顯示，沒寫出來的邊框預設為none，即不顯示。

分別替各個方向設計比較費時，但可以設計出獨具風格的邊框樣式。

延伸閱讀HTMLTable表格的文字大小與字型HTMLTable表格文字顏色HTMLTable表格背景顏色HTML表格增加背景圖片語法HTMLTablecellpadding屬性 您可能會想看 HTMLdiv標籤 設計HTML圖片與圖片邊框間的距離 DIV區塊內文字與邊框的距離調整 HTMLTABLE表格內的文字行高 DIV區塊內的文字行高設計 替HTMLbutton按鈕增加背景圖片 HTMLimgtitle與imgalt的差別 用CSS設計HTML表格欄位內文字靠下對齊 用CSS設計HTML表格欄位內文字靠上對齊 HTMLTablecolspan屬性 今日熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 即時熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 ©Copyrightwibibi.com網頁設計教學百科基礎的網頁設計規劃、資料庫與程式設計Since2012