html表格美化修飾教程

如何創建一個布局協調、色調統一、美觀、大方的表格?這就涉及到對表格的美化修飾。下面是關於ｈｔｍｌ表格美化修飾教程的講解。

本節單詞記憶：屬性　1.cellspacing　2.cellpadding

網頁提示：html語言非常簡單，不需要邏輯理解，而絕大部分朋友覺得它難以掌握，90%的原因在於英語單詞不過關，所以每節記憶幾個單詞是非常有必要的。

一、什麼是表格的美化修飾

表格的美化修飾就是從多方面對表格進行美化修飾，使表格看上去更漂亮、更美觀、更合理。對表格進行美化修飾時，主要從以下幾個方面進行：

●　表格的高度、寬度和邊框。

●　表格、行、列的背景。

●　表格、行、列的對齊方式。

●　表格的填充、間距屬性。

如圖1所示就是經過美化修飾之後的表格。

圖1　美化修飾過的表格

二、如何對表格進行美化修飾

１．如何設置表格的尺寸和邊框

如果不指定表格的高度和寬度，浏覽器就會根據表格內容的多少自動調整高度和寬度。如果不指定表格的邊框的寬度(border屬性)，則浏覽器將不顯示表格邊框。若我們既想設置表格的高度和寬度，又想設置表格邊框的寬度，那麼就得設置表格的高度、寬度和邊框屬性。

語法：

設置表格的寬度、高度和邊框的基本語法：

＜ＴＡＢＬＥ　ｗｉｄｔｈ＝＂表格寬度＂　ｈｅｉｇｈｔ＝＂表格高度＂　ｂｏｒｄｅｒ＝＂表格邊框寬度＂＞　　　　……

 其中，表格的寬度和高度可以用像素來表示，也可以用百分比(與浏覽器當前窗口相比的大小比例)來表示。表格邊框寬度只能用像素來表示。

例如：

浏覽器窗口高度的25%的表格。

示例１：

＜ＴＡＢＬＥ　ｗｉｄｔｈ＝＂４００＂　ｈｅｉｇｈｔ＝＂２００＂　ｂｏｒｄｅｒ＝＂１５＂　　ｂｏｒｄｅｒｃｏｌｏｒ＝＂ｒｅｄ＂＞　　

示例1運行效果如圖2所示。

圖2　表格的尺寸和邊框

小經驗：表格中border屬性只能影響表格四周的邊框寬度，而不能影響表格內單元格之間邊框尺寸。過寬的邊框會影響表格的整體美觀，因此一般邊框寬度設置不應超過5像素。

２．如何設置背景

(1)　表格背景

表格背景包括表格的背景顏色和背景圖像的設置，表格的背景顏色屬性bgcolor是針對整個表格的，表格的背景圖像屬性background也是針對整個表格的，背景圖像會令表格

更加美觀、更加活潑生動。

語法：

設置表格背景基本語法：

＜ＴＡＢＬＥ　ｂｇｃｏｌｏｒ＝＂整個表格的背景顏色＂　ｂａｃｋｇｒｏｕｎｄ＝＂整個表格的背景地址＂＞　　　　……

(2)　行背景色

不僅可以對表格整體設置背景，還可以對單獨一行設置背景色，行的bgcolor顏色可以覆蓋的bgcolor或background屬性。

語法：

設置行的背景色基本語法：

(3)　單元格背景色

不僅可以對表格中行設置背景色，還可以對表格中每一個單元格設置背景色，單元格的bgcolor顏色可以覆蓋行的bgcolor屬性。

語法：

設置單元格的背景色基本語法：

示例２：

＜ＴＡＢＬＥ　ｗｉｄｔｈ＝＂３６０＂　ｈｅｉｇｈｔ＝＂１２０＂　ｂｏｒｄｅｒ＝＂２＂　ｂａｃｋｇｒｏｕｎｄ＝＂ｉｍａｇｅｓ／ｔｙｐｅ＿ｂａｃｋ．ｊｐｇ＂　＞　　

＜ＴＲ　ｂｇｃｏｌｏｒ＝＂＃ＥＢＥＦＦＦ＂＞　　　　

＜ＴＤ　ｃｏｌｓｐａｎ＝＂３＂　　ｂｇｃｏｌｏｒ＝＂ｙｅｌｌｏｗ＂＞辦公設備、文具、耗材＜／ＴＤ＞　　

＜ＴＲ　ｂｇｃｏｌｏｒ＝＂＃ＥＢＥＦＦＦ＂＞　　　　

示例2運行效果如圖3所示。

圖3　背景色的設置

３．如何設置對齊方式

為了美觀大方，表格中的數據一般需要設置對齊方式。設置表格、行或列的對齊方式，修改align屬性為right(右對齊)、center(居中)或Ieft(左對齊)就可以了，默認為“左對齊”。

修改示例2，設置“筆記本電腦”列和“辦公設備、文具、耗材”列居中顯示，代碼如示例3所示。

示例３： 

＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂　ａｌｉｇｎ＝＂ｃｅｎｔｅｒ＂　＞筆記本電腦＜／ＴＤ＞　　　　＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂　ａｌｉｇｎ＝＂ｃｅｎｔｅｒ＂　ｂｇｃｏｌｏｒ＝＂ｙｅｌｌｏｗ＂　＞辦公設備、文具、耗材＜／ＴＤ＞　　

示例3運行效果如圖4所示。

圖4　單元格的對齊方式

４．如何設置填充、間距屬性

如圖4所示，由於這張表格既沒有設置高度，又沒有設置寬度，也沒有設置填充(cellpadding)和間距(cellspacing)屬性，所以非常難看。如果你既不想設置表格的高度，也不想設置表格的寬度，但還要使表格內框寬度(cellspacing)變寬，使文字與邊框距離(cellpadding)拉大，該怎麼辦?其實很簡單，可以通過cellspacing和cellpadding屬性進行調整實現。

下面我們就先了解一下cellspacing和cellpadding是何方神聖?請你參看圖5，圖5中的“內容”相當於圖4中的“筆記本電腦”，其他部分類同。

圖5　表格的填充和間距屬性

內框寬度(cellspacing)和文字與邊框的距離(cellpadding)均以像素為單位，下面示例4就演示了這兩個屬性的使用方法。

示例４：

＜ＴＡＢＬＥ　ｂｏｒｄｅｒ＝＂２０＂　　ｃｅｌｌｐａｄｄｉｎｇ＝＂３０＂　ｃｅｌｌｓｐａｃｉｎｇ＝＂４０＂　ｂｏｒｄｅｒｃｏｌｏｒ＝＂ｒｅｄ＂＞　　

示例4運行效果如圖6所示。

圖6　表格的填充和間距示例說明

圖5所示的表格如此難看、擁擠，相信大家還記憶猶新!下面我們就運用剛才所學的cellspacing和cellpadding屬性，對其進行改造和調整，使其達到美觀、大方的效果。

示例５：

示例1運行效果如圖2所示。

圖2　表格的尺寸和邊框

小經驗：表格中border屬性只能影響表格四周的邊框寬度，而不能影響表格內單元格之間邊框尺寸。過寬的邊框會影響表格的整體美觀，因此一般邊框寬度設置不應超過5像素。

２．如何設置背景

(1)　表格背景

表格背景包括表格的背景顏色和背景圖像的設置，表格的背景顏色屬性bgcolor是針對整個表格的，表格的背景圖像屬性background也是針對整個表格的，背景圖像會令表格

更加美觀、更加活潑生動。

語法：

設置表格背景基本語法：

＜ＴＡＢＬＥ　ｂｇｃｏｌｏｒ＝＂整個表格的背景顏色＂　ｂａｃｋｇｒｏｕｎｄ＝＂整個表格的背景地址＂＞　　　　……

(2)　行背景色

不僅可以對表格整體設置背景，還可以對單獨一行設置背景色，行的bgcolor顏色可以覆蓋的bgcolor或background屬性。

語法：

設置行的背景色基本語法：

(3)　單元格背景色

不僅可以對表格中行設置背景色，還可以對表格中每一個單元格設置背景色，單元格的bgcolor顏色可以覆蓋行的bgcolor屬性。

語法：

設置單元格的背景色基本語法：

示例２：

＜ＴＡＢＬＥ　ｗｉｄｔｈ＝＂３６０＂　ｈｅｉｇｈｔ＝＂１２０＂　ｂｏｒｄｅｒ＝＂２＂　ｂａｃｋｇｒｏｕｎｄ＝＂ｉｍａｇｅｓ／ｔｙｐｅ＿ｂａｃｋ．ｊｐｇ＂　＞　　

＜ＴＲ　ｂｇｃｏｌｏｒ＝＂＃ＥＢＥＦＦＦ＂＞　　　　

＜ＴＤ　ｃｏｌｓｐａｎ＝＂３＂　　ｂｇｃｏｌｏｒ＝＂ｙｅｌｌｏｗ＂＞辦公設備、文具、耗材＜／ＴＤ＞　　

＜ＴＲ　ｂｇｃｏｌｏｒ＝＂＃ＥＢＥＦＦＦ＂＞　　　　

示例2運行效果如圖3所示。

圖3　背景色的設置

３．如何設置對齊方式

為了美觀大方，表格中的數據一般需要設置對齊方式。設置表格、行或列的對齊方式，修改align屬性為right(右對齊)、center(居中)或Ieft(左對齊)就可以了，默認為“左對齊”。

修改示例2，設置“筆記本電腦”列和“辦公設備、文具、耗材”列居中顯示，代碼如示例3所示。

示例３：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂　ａｌｉｇｎ＝＂ｃｅｎｔｅｒ＂　＞筆記本電腦＜／ＴＤ＞　　　　＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂　ａｌｉｇｎ＝＂ｃｅｎｔｅｒ＂