HTML 表格背景圖片語法範例

增添 HTML 表格背景圖片是一種簡單又有效率的表格美化方式，傳統的 HTML 表格背景可以透過 background 來添加，如果妳想採用比較新的設計方式，就採用 CSS 的 background-image 來做吧！這也是目前相當標準的 HTML 表格背景圖片設計語法。我們這裡提到的背景圖片設計，指的是把預先準備好的圖片套用至 HTML 表格，以下我們就以傳統的 HTML background 功能與 CSS 的 background-image 屬性來套用 HTML 表格背景圖片做範例語法介紹。

範例一、使用 HTML 的 background 方法
<table background="背景圖片網址" style="width:300px;height:200px;text-align:center;" border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
範例的實際視覺效果
12
34
我們在範例一準備了一個共有四個欄位的 HTML 表格，並透過 HTML 內建的 background 將背景圖片插入到表格中，範例與法中的 background 等號右邊接的是預先準備好的一張圖片，大小為 300x200，這樣的大小與我們設定的 HTML 表格剛剛好吻和，這樣套入表格的背景圖片才會漂亮。範例中 style 等號右邊是用 CSS 的方式設定表格的寬度（width:300px）、高度（height:200px;）以及讓表格欄位內文字可以置中顯示（text-align:center），最後的 border 是表格邊框粗細，故意設為 1 讓大家看得比較清楚。

範例二、使用 CSS 的 background-image 屬性
<table style="width:300px;height:200px;background-image:url(背景圖片網址);text-align:center;" border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
範例的實際視覺效果
12
34
範例二的實際效果其實與範例一幾乎完全一樣，語法最大的差別就在於範例二使用的是 CSS 的 background-image 屬性，這是標準的背景圖片設計屬性，其他的部份程式碼也都相同，範例二所使用的背景圖片與範例一的大小也是一樣的。

以上兩個方式都可以很輕鬆的套用 HTML 表格背景圖片，不過由於新穎的網頁設計以 CSS 為主，其它網頁元素的背景屬性也可以透過 CSS 的各種背景設計功能來做，所以建議盡量以 CSS 的 background-image 屬性來設計 HTML 表格背景圖片。

更多表格設計
© Copyright webtech.tw Since 2010