项目五_任务三_使用CSS控制表格元素.ppt.ppt

电子商务网页制作 使用CSS控制表格样式 学习目标 知识目标： 能理解表格元素的主要属性。 能掌握设置表格CSS规则的方法。 能力目标： 能熟练使用CSS规则美化表格。 任务流程 使用CSS设置表格样式，就是通过CSS来控制表格元素的相关属性值。通过这些属性对表格的外观、内容等进行格式化。 一、表格元素的主要属性 任务流程 一、表格元素的主要属性 table标记的常用属性 常用属性 功能 Width 表格宽度，单位为像素或百分比。 Height 表格高度，单位为像素或百分比。 align 表格的对齐方式，属性值：left、right、center，默认为左对齐（left）。 border 表格边框的宽度，单位为像素。默认值为0，即无边框。 border-collapse 属性设置是否将表格边框折叠为单一边框。 取值：separate——边框分开；collapse——折叠边框 bordercolor 表格边框颜色。 bgcolor 表格的背景颜色。 background 表格的背景图像。 cellspacing 单元格与单元格之间的间距，单位为像素。 cellpadding 单元格内容与单元格边框的距离，单位为像素 任务流程 一、表格元素的主要属性 tr标记的常用属性 常用属性 功能 align 行中内容的水平对齐方式。属性值：left、right、center，默认为左对齐（left）。 valign 行中内容的垂直对齐方式。属性值：top、middle、bottom，默认为居中对齐（middle）。 height 行高，单位为像素或百分比。 title 当鼠标指向该行是，显示的文字。 bgcolor 背景颜色。 bordercolor 边框颜色。 nowrap 设定行中所有单元格中内容不能自动换行。 任务流程 一、表格元素的主要属性 td标记的常用属性 常用属性 功能 align 单元格内容的水平对齐方式。 属性值：left、right、center，默认为左对齐。 valign 单元格内容的垂直对齐方式。 属性值：top、middle、bottom，默认为居中对齐。 width 单元格的宽度。 height 单元格的高度。 bgcolor 单元格的背景颜色。 bordercolor 单元格的边框颜色。 nowrap 设定单元格中内容不能自动换行。 rowspan 单元格所占的行数，用于合并单元格。 colspan 单元格所占的列数，用于合并单元格。 任务流程 设置表格CSS，实现图2所示效果。 二、表格CSS样式举例 图2 图1 任务流程 ⑴建立table的CSS规则。 ⑵建立caption标记的CSS规则。 ⑶建立caption标记的CSS规则。 ⑷建立td标记的CSS规则。 ⑸设置表格中奇数行与偶数不同填充色。 建立CSS规则， 应用CSS规则。 二、表格CSS样式举例 任务流程 设置图1的表格CSS，实现图2所示效果。 三、CSS样式在网页表格中的应用 图2 图1 课后练习 1．填空题 ⑴表格的__________属性设置为________，可实现表格折叠边框。 ⑵要建立诸如“.sell_table caption”的CSS样式，应在“新建CSS样式”对话框中单击“选择器类型”中的“______”，再输入样式名。