网页设计与制作教程Web前端开发（第7版）课件：CSS3的属性-CSS表格属性.pptx

本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样式。CSS3的属性CSS表格属性《网页设计与制作教程Web前端开发第7版》

目录CSS3的属性5.1CSS背景属性5.2CSS字体属性5.3CSS文本属性5.4CSS尺寸属性5.5CSS列表属性5.6CSS表格属性5.7CSS内容属性5.8CSS属性的应用5.9实训——制作社区网页面习题5

5.6CSS表格属性5.6.1合并边框属性border-collapse语法：border-collapse:separate|collapse示例：table{border-collapse:separate;}

5.6CSS表格属性5.6.2边框间隔属性border-spacing语法：border-spacing:length|length示例：table{border-collapse:separate;border-spacing:10px;}

5.6CSS表格属性5.6.3标题位置属性caption-side语法：caption-side:bottom|left|right|top示例：tablecaption{caption-side:top;width:auto;text-align:left;}

5.6CSS表格属性5.6.4单元格无内容显示方式属性empty-cells语法：empty-cells:hide|show

5.6CSS表格属性【例5-17】使用border-spacing属性设置相邻单元格边框间的距离，本例文件5-17.html的显示效果，如图5-20所示。

5.6CSS表格属性!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleCSS表格属性/titlestyletype=text/csstable.one{border-collapse:separate;/*表格边框独立*/border-spacing:10px;/*单元格水平、垂直距离均为10px*/}table.two{border-collapse:separate;/*表格边框独立*/border-spacing:10px20px;/*单元格水平距离10px、垂直距离20px*/empty-cells:hide;/*表格的单元格无内容时隐藏单元格的边框*/}/style/head

5.6CSS表格属性bodytableborder=1style=caption-side:bottom;caption每餐饮料/captiontrth早餐/thth午餐/thth晚餐/th/trtrtd可可/tdtd咖啡/tdtd茶/td/tr/tablehrtableborder=1style=border-collapse:collapse;border-spacing:10px20px;trth早餐/thth午餐/thth晚餐/th/trtrtd可可/tdtd咖啡/tdtd茶/td/tr/tablehr

5.6CSS表格属性tableclass=oneborder=1trth早餐/thth午餐/thth晚餐/th/trtrtd可可/tdtd咖啡/tdtd茶/td/tr/tablebrtableclass=twoborder=1trth早餐/thth午餐/thth/th/trtrtd可可/tdtd/tdtd茶/td/tr/table/body/html

5.6CSS表格属性5.6.4表格设置方式属性table-layout语法：table-layout:auto|fixed示例：table{table-layout:auto;}

5.6CSS表格属性【