25.4　CSS控制表格实例

经过前面各节的学习中，理解了用CSS控制表格的基本语法，然后分别介绍了border-collapse属性和table-layout的用法，本节再来总结两属性的用法，通过实例比较这两个属性在表格中的应用。

本实例分三步，每个步骤演示出不同的属性和功能。从HTML开始设置表格，再到CSS控制表格，步骤如下所示。

25.4.1　布局好表格

新建一张网页，在标记对＜body＞＜/body＞中，插入表格标记对＜table＞＜/table＞，并在表格中设置多行多列表格数据，设置表格中的背景颜色为blue，且设置表格中的表元背景颜色值为#333333，这样通过用不同的背景颜色区别单元格和边框，即颜色为blue的为边框的颜色，如代码25.4所示。

代码25.4　源代码\第21章\区别单元格和边框.html

————————————-文件名：区别单元格和边框.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞CSS控制表格实例手把手＜/title＞

04 ＜style type="text/css"＞

05 table

06 {

07 /设置表格中文本颜色/

08 color：red；

09 }

10 ＜/style＞

11 ＜/head＞

12 ＜body＞

13 ＜table bgcolor="blue"＞

14 ＜tr＞

15 ＜td bgcolor="#333333"＞CSS样式控制表格1＜/td＞＜td bgcolor="#333333"＞CSS样

16 式控制表格2＜/td＞＜td bgcolor="#333333"＞CSS样式控制表格3＜/td＞

17 ＜/tr＞

18 ＜tr＞

19 ＜td bgcolor="#333333"＞CSS样式控制表格4＜/td＞＜td bgcolor="#333333"＞CSS样

20 式控制表格5＜/td＞＜td bgcolor="#333333"＞CSS样式控制表格6＜/td＞

21 ＜/tr＞

22 ＜tr＞

23 ＜td bgcolor="#333333"＞CSS样式控制表格7＜/td＞＜td bgcolor="#333333"＞CSS样

24 式控制表格8＜/td＞＜td bgcolor="#333333"＞CSS样式控制表格9＜/td＞

25 ＜/tr＞

26 ＜/table＞

27 ＜/body＞

28 ＜/html＞

【代码解析】在上述代码中，代码第13～26行列出了表格一，且背景颜色为blue，通过三行三列的单元格表示，且输入不同文本的内容，用颜色#333333来填充单元格，所看到的颜色呈现出边框效果，如图25.4所示。

图　25.4　区别单元格和边框