修改HTML Table 表格的邊框樣式 - WebTech 網頁設計教學站

HTML Table 除了可以用來排版之外，當然也可以用來作一些資料呈現的表格，本篇提供幾種簡單的表格邊框樣式美化的範例，這些範例主要是透過CSS 的border-style 技巧 ... WEBTECH網頁設計教學站 首頁 PHP CSS HTML JavaScript GIMP Linux OpenOffice 瀏覽器 其它 Home › HTML › 修改HTMLTable表格的邊框樣式 修改HTMLTable表格的邊框樣式 HTMLTable除了可以用來排版之外，當然也可以用來作一些資料呈現的表格，本篇提供幾種簡單的表格邊框樣式美化的範例，這些範例主要是透過CSS的border-style技巧呈現，有許多種不同的邊框樣式風格可以自己調整，例如實體線（solid）、虛線（dashed）、雙實線（double）、細虛線（dotted）...等，表格邊框的顏色與粗細都可以自己調整出想要的風格。

HTMLTable表格的邊框樣式範例一、實線

表格內容1	表格內容2	表格內容3
表格內容4	表格內容5	表格內容6

輸出結果表格內容1表格內容2表格內容3表格內容4表格內容5表格內容6範例一使用的是實線，也就是範例語法中紅色標註的地方，若您想要了解HTMLTable的語法規則，請參閱《HTMLTable表格設計》有詳細的解說，範例中style代表要開始使用css語法，裡面的border代表設定的是表格邊框，三個參數分別代表的意義解說，第一個參數3px是表格邊框粗細、第二個參數#FFAC55是邊框顏色（參閱Wibibi資料：色碼表）、第三個參數solid則是邊框的樣式（參閱Wibibi資料：CSSborder-style邊框樣式），這三個參數都可以自己修改，另外幾個功能說明如下。

padding-表格內距rules -表格內框線的顯示方式cellpadding-表格內每個欄位的內距HTMLTable表格的邊框樣式範例二、虛線

表格內容1	表格內容2	表格內容3
表格內容4	表格內容5	表格內容6

輸出結果表格內容1表格內容2表格內容3表格內容4表格內容5表格內容6同樣的技巧，範例二僅修改了邊框樣式為虛線dasched，其他部分並未修改。

HTMLTable表格的邊框樣式範例一、雙實線

表格內容1	表格內容2	表格內容3
表格內容4	表格內容5	表格內容6

輸出結果表格內容1表格內容2表格內容3表格內容4表格內容5表格內容6雙實線的樣式名稱為double，如果想要使用其他更多的樣式，可以參閱Wibibi所提供《CSSborder-style邊框樣式》的各種樣式範例，看到這裡，相信您已經能夠掌握HTMLTable表格邊框的樣式修改技巧了。

延伸閱讀HTMLTable表格設計修改HTMLTable表格的背景顏色修改HTMLTable表格的邊框顏色 您可能會想看 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 設計具有超連結效果的HTMLolli自動排序項目清單 設計具有超連結效果的HTMLulli項目清單 HTMLolli列表(數字編號項目清單) HTMLulli列表(項目清單) HTMLtextarea表單多行文字輸入欄位背景圖片設計 HTMLtextarea表單多行文字輸入欄位背景顏色設計 即時熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 今日熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 ©Copyrightwebtech.twSince2010