HTML 表格增加背景圖片語法

HTML 表格增加背景圖片的語法普遍分為兩種，第一種就是傳統的 HTML background 屬性，直接將背景圖片套用在表格上，第二種方式是用 CSS 的 background-image 屬性替表格增加背景圖片，兩者的差別在哪裡呢？傳統的 HTML background 使用簡便，但背景圖片較難跟表格大小配合，而 CSS 的 background-image 則可以讓圖片很輕易的與表格寬度、高度完美結合，以下分為這兩種設計方式的範例給各位參考，原則上是建議使用 CSS 的設計語法，畢竟 CSS 已經大規模的取代傳統 HTML 設計模式了。

範例一、用 HTML background 替表格增加背景圖片

範例呈現效果

範例一是個簡單的四欄位表格，我們使用了 HTML background 插入一個寬度為 200px 及高度為 133px 的背景圖片，如果單純的把背景圖片插入表格，其實效果不會這麼好，因為表格預設的欄位也沒有這麼大格，所以我們在後面加上了 CSS 的 style 來宣告表格的寬度與高度，讓整個表格的大小與背景圖片吻合，看起來會比較漂亮些，HTML background 屬性與 CSS 搭配在一起設計也是蠻容易的，若您對於網頁表格的設計規則或是傳統的 HTML 背景設計方式有興趣，請參閱這兩篇。

接著我們來進一步的看範例二如何純用 CSS 完成表格背景圖片的使用。

範例二、用 CSS background-image 替表格增加背景圖片

範例呈現效果

範例二與範例一最大的差異在於把 HTML backgroucd 取消，直接在 CSS 的 style 裡宣告 background-image 標準的背景圖片設計屬性，可以與後面的表格寬度（width:200px;）、高度（height:133px;）完美結合，CSS 對於網頁元素的尺寸設計比傳統的 HTML 更嚴謹。這裡有幾篇關於 CSS 的背景設計系列，建議仔細研究看看。

有了以上幾個 CSS 背景設計的技巧，不只是可以用在網頁表格上，其他許多的網頁元素如 DIV 區塊、span 區域甚至是整個網頁（body）的背景圖片都可以使用，應用範圍相當廣泛，這也是 CSS 設計的優點。

延伸閱讀