HTML 表格背景圖片語法範例

增添 HTML 表格背景圖片是一種簡單又有效率的表格美化方式,傳統的 HTML 表格背景可以透過 background 來添加,如果妳想採用比較新的設計方式,就採用 CSSbackground-image 來做吧!這也是目前相當標準的 HTML 表格背景圖片設計語法。我們這裡提到的背景圖片設計,指的是把預先準備好的圖片套用至 HTML 表格,以下我們就以傳統的 HTML background 功能與 CSSbackground-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
範例二的實際效果其實與範例一幾乎完全一樣,語法最大的差別就在於範例二使用的是 CSSbackground-image 屬性,這是標準的背景圖片設計屬性,其他的部份程式碼也都相同,範例二所使用的背景圖片與範例一的大小也是一樣的。

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

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