10.4 使用CSS美化表格
上一节中说过，表格样式的设置应该在CSS中完成。常用的设置表格样式的属性包括：
（1）width：设置表格或单元格的宽度。
（2）height：设置表格或单元格的高度。
（3）border：对table设置该属性，控制的是表格的外边框；对td设置该属性，控制的是每一个单元格的边框。
（4）border-collapse：设置表格边框是否合并为单一边框（从前几节的例子中可以看出，表格的边框有外边框和单元格边框，这两个边框是分开显示的，border-collapse可以将外边框与单元格边框合并。）
（5）background：设置表格或单元格的背景。
（6）text-align：设置表格或单元格中内容的水平对齐方式。
（7）padding：设置单元格内间距。
下面通过一个实例来看CSS如何彻底改变表格样式，使表格看起来更精致。
本例以制作一个音乐播放列表为例，首先搭建出表格的HTML基本结构，这是一个16行5列的表格，代码如下，效果如图10-7所示。
图10-7 没有设置任何样式的表格
使用CSS对页面整体环境进行设置，代码如下：
接下来对表格的整体和标题进行设置，代码如下：
此时的效果如图10-8所示，可以看到整体的文字样式和标题的样式已经设置完成。
图10-8 设置页面及表格整体样式
现在设置各单元格的样式。为所有的单元格（th和td）添加边框和内间距，为表头添加背景图片，代码如下：
在浏览器中预览，可以看到整个表格有了边框，单元格有内间距，表头上有背景图片，如图10-9所示。
图10-9 设置单元格样式
接下来设置tfoot部分的样式，将背景设为灰色，内容居中显示。CSS代码为：
此时效果如图10-10所示。
最后设置当鼠标指针经过tbody中某行时整行变色提示的效果。对于Firefox浏览器，它完善支持“：hover”伪类，所以通过CSS的“：hover”伪类就可以实现该效果。代码如下：
图10-10 设置tfoot部分的样式
效果如图10-11所示。
图10-11 鼠标指针经过tbody中某行时整行变色
此时，表格的制作已经完成，对比起始效果和最终的完成效果，可以看到表格样式的变化非常大，这都是通过CSS实现的。
注意：这个表格还可以通过JavaScript代码设置奇、偶行背景颜色不一样的效果，如图10-12所示，Javascript代码在这里不展开介绍。
图10-12 使用JavaScript代码设置奇、偶行的不同样式