表格中应用CSS样式

2.5.3　表格中应用CSS样式

表格、表行与单元格的显示，以及插入对象的显示格式，都要通过应用CSS样式才能实现。

1. 给单元格里的对象应用CSS样式

表格的内容都放置在单元格里，在单元格里插入了文字、图片、媒体对象后，也可以将CSS样式应用于这些对象，如同前面各节给对象应用CSS样式一样，这里不再重复。

2. 给表格、表行和单元格应用CSS样式

逐个地给单元内插入的对象设置CSS样式，具有个性化优点，但若要对整个表格所有单元格设置相同样式，就显得麻烦了。

如果可以给表格、表行及单元格标签table、tr、th、td设置CSS样式，就能使表格、表行和单元格都按规定的CSS样式显示。

定义标签样式的方法与定义样式类的方法相似，所不同的是在图2-9所示对话框的“选择器类型”中要选择“标签”，“选择名称”要从下拉列表中选择table、tr、th或td(不要输入名称)，其余方面与样式类的定义没什么区别。

同样地，如果需要对整个网站内所有表格都应用这些标签样式，则将标签样式定义在一个外部CSS样式文件里；若标签样式只应用于正在编辑的网页，则定义在网页head头部；若标签样式只应用于某一个表格、某一行、某一个单元格，那就将样式定义在table、tr、th、td标签元素内,例如：

<tr style=”color:#F00”>　<td style=”font-family:Tahoma”>......</td> </tr>

这样，就会出现多个CSS样式对一个单元格内对象发挥作用了，如果都起作用的CSS样式对同一个属性(如color)有不同的定义，那么最终显示结果是按哪个样式显示呢？

按照CSS的规定，控制范围越小的样式，其优先级越高。对于一个单元格里的对象，如果同时有如下样式：直接应用于对象的样式类、td标签样式、tr标签样式、table标签样式。这些样式的优先级依次降低。

3. 应用表格标签样式制作彩色细线表格

应用table、tr、td标签样式，并适当设置边框线、填充和边距，可以制作漂亮的彩色细线表格。

例如，要设计一个边线为细红线、表行有灰色背景的表格。

先在网页里插入一个3行1列的表格，宽500像素，在属性面板里将边框线设为0(border="0")、边距设为1(cellspacing="1")、填充设为0(cellpadding="0")。

再选择CSS标签样式，使表格的背景色为红色、表行的背景色为灰色。这里对这一个表格应用CSS标签样式，所以就直接在标签元素内定义并应用标签样式。

在table元素内定义样式：style="background-color:#F00"

在第一行tr元素内定义样式：style="background-color:#DDD"

在第二行tr元素内定义样式：style="background-color:#DDD"

在第三行tr元素内定义样式：style="background-color:#DDD"

浏览效果如图2-37所示。

其实这个表格显示出来的红色细“边线”并不是表格table的边框线border，而是table的背景红色，由于三个表行tr的背景色都是灰色，而单元格之间、单元格与边框之间的间距都是1，而红色底色就透过1像素的间隙显露出来了，给人感觉就是一个边线为细红线的表格。其实这是表行tr背景色的优先级比表格table背景色的优先级高的体现。

图2-37　应用CSS样式设计的红色细边线表格

注意：当使用“属性面板”等可视化方法编辑表格等对象时，Dreamweaver会自动修改网页的HTML代码，或CSS样式。有时候Dreamweaver会产生一些多余的代码，这时可使用“代码”视图手动修改网页代码，这样网页代码可更加简洁。