如何创建一个布局协调、色调统一、美观、大方的表格?这就涉及到对表格的美化修饰。下面是关于ｈｔｍｌ表格美化修饰教程的讲解。

本节单词记忆：属性　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所示。

示例３：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂　ａｌｉｇｎ＝＂ｃｅｎｔｅｒ＂　＞笔记本电脑＜／ＴＤ＞　　　　＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂　ａｌｉｇｎ＝＂ｃｅｎｔｅｒ＂