HTML 表格增加背景圖片語法

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

範例一、用 HTML background 替表格增加背景圖片
<table background="背景圖片網址" style="width:200px;height:133px;" border="1">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
範例呈現效果
範例一是個簡單的四欄位表格,我們使用了 HTML background 插入一個寬度為 200px 及高度為 133px 的背景圖片,如果單純的把背景圖片插入表格,其實效果不會這麼好,因為表格預設的欄位也沒有這麼大格,所以我們在後面加上了 CSS 的 style 來宣告表格的寬度與高度,讓整個表格的大小與背景圖片吻合,看起來會比較漂亮些,HTML background 屬性與 CSS 搭配在一起設計也是蠻容易的,若您對於網頁表格的設計規則或是傳統的 HTML 背景設計方式有興趣,請參閱這兩篇。
接著我們來進一步的看範例二如何純用 CSS 完成表格背景圖片的使用。

範例二、用 CSS background-image 替表格增加背景圖片
<table style="background-image:url(背景圖片網址);width:200px;height:133px;" border="1">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
範例呈現效果
範例二與範例一最大的差異在於把 HTML backgroucd 取消,直接在 CSS 的 style 裡宣告 background-image 標準的背景圖片設計屬性,可以與後面的表格寬度(width:200px;)、高度(height:133px;)完美結合,CSS 對於網頁元素的尺寸設計比傳統的 HTML 更嚴謹。這裡有幾篇關於 CSS 的背景設計系列,建議仔細研究看看。
有了以上幾個 CSS 背景設計的技巧,不只是可以用在網頁表格上,其他許多的網頁元素如 DIV 區塊、span 區域甚至是整個網頁(body)的背景圖片都可以使用,應用範圍相當廣泛,這也是 CSS 設計的優點。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012