第25章用CSS控制表格.pptVIP

第25章 用CSS控制表格 在第一部分的第8章中，介绍了表格（table）的用法。在使用表格标签时，可以用CSS代码对表格的效果进行控制，如设置表格的行与单元格的边框是独立还是合并、表格布局时是自动的布局算法还是固定的，都可以用CSS代码对表格控制。 学习本章，将会了解以下内容： 控制表格的基本语法 设置表格边框独立或合并 设置表格布局的算法 用CSS控制表格实例 25.1 控制表格的基本语法 为了与表格的语法区别开，本小节介绍的是用CSS代码控制表格的CSS语法，这些语法可以控制表格的行与单元格边框是独立还是合并和表格的布局算法。这样就可以通过CSS来控制表格了，如果会JavaScript语言的话，也可以用js（JavaScript的简写）来控制CSS，再从网页上显示效果。 下面是控制表格的样式的属性，语法用border-collapse表示，其后接的值在separate和collapse中选择一个，其默认的是前者，表现出的效果正如在HTML中的表格所表现的效果一样，其下是语法完整表达。 border-collapse : separate | collapse 属性border-collapse的第一个值separate，是本属性的默认值，表示边框独立。而后面的值为collapse，表示相邻边被合并，前者表示有边框，后者表示合并了边框，很容易区分其功能。下面再介绍一个属性---table-layout，表示布局固定的算法，也是控制表格属性常用的属性之一，如下表示其-完整语法。 table-layout : auto | fixed 25.2 设置表格边框独立或合并 在上一节中，简单地介绍了表格中的两个重要属性，其中一个就是本小节要详细介绍的，表格边框独立与合并。与前面介绍的一样，本属性应用在表格是否显示边框，如果要显示其边框，就设置separate；否则，设置collapse，参数设置如下： border-collapse : separate | collapse 属性border-collapse的应用主要是表格上，即HTML代码中出现表格标记对，然后用CSS控制表格边框是否合并，同时，如果边框为独立显示时，也根据边框的宽度来显示，即边框宽度为5时，在表格中也显示为5，边框宽度越大，显示也越宽，相反，如果设置的是collapse时，边框不管设置何值，都没有显示，即合并了边框的宽度。代码25.2表示表格边框独立与合并用法。 25.3 设置表格布局的算法 设置表格的布局算法，在网页中应用比较重要，特别是用表格来布局时，表格的宽度是否要设置对当前浏览器的宽度。要设置好表格的布局算法，得用到布局算法的属性，表格布局算法用table-layout表示，其后接auto值，表示默认，或者可以接fixed，完整语法如下表示： table-layout : auto | fixed 参数auto为默认值，默认的自动算法，布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来。而另一参数值fixed表示固定布局的算法，在这种算法中，表格和列的宽度取决于col对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。假如表格没有指定宽度(width)属性，则表格被呈递的默认宽度为100% 。 利用布局算法来设置表格的宽度，是用table布局网页的重要技巧，能表现出布局的宽度自适应性，下面用实例来比较其用法，表格一调协table-layout为auto，表格二设置其为fixed参数，如代码25.3所示。 25.4 CSS控制表格实例手把手 从前面各节的学习中，理解了用CSS控制表格的基本语法，然后分别介绍了border-collapse属性和table-layout的用法，本节再来总结两属性的用法，通过实例比较这两个属性在表格中的应用。 本实例分三步，每步骤演示出不同的属性和功能。从HTML开始设置表格，再到CSS控制表格，步骤如下所示。 25.4.1 布局好表格 新建一张网页，在标记对body/body中，插入表格标记对table/table，并在表格中设置多行多列表格数据，设置表格中的背景颜色为blue，且设置表格中的表元背景颜色值为#CCCCCC，这样通过用不同的背景颜色区别单元格和边框，即颜色为blue的为边框的颜色，如代码25.4所示。 25.4.2 表格边框独立和合并 本步骤来介绍对表格的边框设置不同的表格边框独立和合并。通过前面步骤的介绍，看到表格边框的效果，本步骤再添加一个表格标记，且文本内容设置为一样，但设置表格的样式不一样。 在第一个表格中，设置表格属性border-collapse为separate，表示表格的独立边框，在网页中可以看到各表格的表元中，用边框隔开；第二个表格，用同