第章用CSS美化表格.ppt

第10章 用CSS美化表格 表格原来的用途是装载数据列表，数据库表等大量数 据的页面元素。的在使用CSS布局之前，网页设计者常常使 用表格来进行网页页面的布局排版。当打开网页的HTML文 件时就会看到大量的tr和td标签。从设计者开始使用CSS布 局方式后，表格table就回归了本来的用途。 本章内容包括： 介绍表格的基本页面元素 使用CSS样式控制表格的表现形式 使用表格和CSS样式制作日历 10.1 表格的基本页面元素 在之前大部分网页设计者使用表格来布局页面的时候 只是使用table、tr和td几个标签。但是表格作为数据载体使 用，它包含的元素不仅仅这几个。示例10-1中使用了一个语 义明确的表格。 　　在XHTML文档中，table标签还可以插入thead、tbody 、tfoot标签；thead代表表格的头部，用于放置表格顶部的 列名称；tbody代表表格的主要数据内容，用于放置表格数 据；tfoot代表表格的底部，用于放置表格的说明等等。示例 10-2 10.2 使用CSS控制表格元素 10.2.1 设置表格元素宽度 10.2.2 设置表格元素边框 10.2.1 设置表格元素宽度 以往对表格元素设置宽度都会使用标签属性，这样做 使代码非常臃肿。使用CSS的width属性就能设置表格元素 的宽度。通常使用像素值和百分比来设置表格元素的宽度。 table{width:500px;} table{width:80%;} 示例10-3 10.2.2 设置表格元素边框 使用table标签的border属性后，表格中的每个单元格 都带有边框。若希望得到如excel中的单线表格，就要使用 CSS的border-collapse属性。示例10-3 border-collapse : separate | collapse 参数：?separate : 　边框独立（默认值） collapse ：边框合并 10.3 本章实例：制作日历 在个人博客或者某些个 人网站上，常会带有一 个日历。日历中还可以 添加备忘录等功能。日 历包括多行多列，使用 表格来布局最合理。本 章实例为制作一个简单 的日历，效果如图所示。 步骤： 1.新建一个文件夹名为chapter10，在该文件夹中新建一个标准XHTML文档，命名为index.html。在body中写入网页所包含的内容。 2.设定补白部分。设定整个表格的宽度为300px；四周边距为20px。 3.制作日历的边框。 4.去掉表格之间的空隙。 5.设置caption的属性。使用id选择器，设置单元格的背景为浅蓝色。可以将背景指定给某天的单元格。 10.4 常见面试题 问题1：使用表格如何兼容IE和火狐？ 问题2：使用tbody、thead和tfoot没有实际作用，为何还要加入到表格中？ 问题3：设置单元格边框后，如何能将每个单元格之间的空隙消除？ 10.5 小结 本章讲解了表格中具有语义的标签以及使用CSS样式对表格进行美化。 本章的重点是使用CSS样式设置表格的边框与背景等基本属性。 本章的难点是合理运用表格中具有语义的标签。 下一章将介绍使用CSS样式美化表单样式的方法。