第10章 用CSS美化表格.docVIP

用CSS美化表格 表格的用途是装载数据列表、数据库表、网页页面的布局排版等大量数量的页面元素。 例如： table border=1 summary=糖果价格表 caption糖果价格表/caption tr th商品/th th价格/th th数量/th /tr tr td奶糖/td td10元/td td1/td /tr tr td巧克力/td td10元/td td1/td /tr /table HTML表格中有两种类型的单元格： 表头单元格 - 包含表头信息（由 th 标签创建） 标准单元格 - 包含数据（由 td 标签创建） th标签内部的文本通常会呈现为居中的粗体文本，而th标签内的文本通常是左对齐的普通文本。 其中，border属性用于设置表格边框的宽度。summary属性来嵌入关于该表格的说明，summary中的语句不会出现在页面上，但是对于搜索引擎来说是友好的。Caption标签用于嵌入表格的标题，使用caption标签会在表格顶部显示标题，同样对于搜索引擎是友好的。 在XHTML文档中，table标签还能插入thead、tbody和tfoot标签。Thead代表表格的头部，tbody代表表格主要数据内容，tfoot代表表格的底部。 例如： table border=1 width=200px summary=糖果价格表 caption糖果价格表/caption thead tr th商品/th th价格/th th数量/th /tr /thead tbody tr td奶糖/td td10元/td td2/td /tr tr td水果糖/td td12元/td td1/td /tr tr td巧克力/td td10元/td td2/td /tr tr td软糖/td td10元/td td1/td /tr 　/tbody 　tfoot tr td colspan=3总价：62元/td /tr 　/tfoot /table 设置表格元素宽度：CSS提供width属性用来设置表格元素的宽度。通常使用像素值和百分比来设置表格元素的宽度。 使用width属性的语法： table{width:500px;} /*设置表格宽度为500像素*/ table{width:80%;} /*设置表格宽度为80%*/ 用百分比设置表格的宽度，表格的宽度会根据其父元素的宽度来设置。 技巧：对于表格的其他元素也可以使用像素值和百分比来设置宽度。 设置表格元素边框：使用table标签的border属性后，表格都带有边框。CSS提供border-collapse属性用于设置表格边框。Border-collapse属性有两个值，默认值为separate，设置为collapse属性值后就能去除表格边框间的空隙。 使用border-collapse属性的语法： table{border-collapse:collapse;} /*设置表格的边框合并*/ table{border-collapse:separate;} /*设置表格的边框为不合并*/ 25