《用CSS控制表格》PPT课件.ppt

第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 4CSS控制表格实例手把手 从前面各节的学习中 理解了用CSS控制表格的基本语法 然后分别介绍了border collapse属性和table layout的用法 本节再来总结两属性的用法 通过实例比较这两个属性在表格中的应用 本实例分三步 每步骤演示出不同的属性和功能 从HTML开始设置表格 再到CSS控制表格 步骤如下所示 25 4 1布局好表格 新建一张网页 在标记对中 插入表格标记对 并在表格中设置多行多列表格数据 设置表格中的背景颜色为blue 且设置表格中的表元背景颜色值为 CCCCCC 这样通过用不同的背景颜色区别单元格和边框 即颜色为blue的为边框的颜色 如代码25 4所示 25 4 2表格边框独立和合并 本步骤来介绍对表格的边框设置不同的表格边框独立和合并 通过前面步骤的介绍 看到表格边框的效果 本步骤再添加一个表格标记 且文本内容设置为一样 但设置表格的样式不一样 在第一个表格中 设置表格属性border collapse为separate 表示表格的独立边框 在网页中可以看到各表格的表元中 用边框隔开 第二个表格 用同样的表格文本 在设置表格中的border collapse属性为collapse时 两者效果就不一样了 在第二个表格中 所表示的是表格的边框合并 即表格中的表元之间没有边框显示 代码25 5表示了边框独立与合并的用法 25 4 3设置表格算法为自动和固定 设置表格布局的算法为自动和固定 通过前面知识的介绍 用CSS控制表格算法为自动需在table layout属性后接auto 属性值auto表示算法为自动 而设置table layout属性的属性值为fixed时 表示表格算法的固定 在t1中加入布局算法为自动 而在t2中加入布局算法为固定 下面代码表示在样式表的基本上进行修改 其他HTML标记都没变化 只有样式加上table layout属性 通过修改样式文件后的样式代码如下所示 t1 border collapse separate table layout auto t2 border collapse collapse table layout fixed 25 5小结 本章主要介绍了用CSS来控制表格 在表格标签中 可以用border collapse来控制单元格边框与行