大学课程《Web前端开发与应用教程》PPT教学课件：项目七任务2 CSS控制表格样式.pptxVIP

项目7表格与表单·表格样式的控制·表单样式的控制·表格标记·表单的相关标记HTML

理解表格的创建1熟悉表单样式的控制42掌握表格样式的控制理解掌握熟悉掌握3掌握表单相关标记?学习目标

任务二CSS控制表格样式

下面，详细讲解CSS控制表格样式。使用table标记的border属性可以为表格设置边框，但是这种方式设置的边框效果并不理想，如果要更改边框的颜色，或改变单元格的边框大小，就会很困难。

以日历为例，分析CSS控制表格样式日历的边框border日历的单元格边距paddingheightwidth

CSS代码如下所示：table{ width:280px; height:280px; border:1pxsolid#F00;/*设置table的边框*/}td,th{border:1pxsolid#F00;}/*为单元格单独设置边框*/在设置表格的边框时，也要给单元格设置相应的边框。2.1CSS控制表格边框

运行效果如图所示:

[点击操作演示]从上图可以看出，虽然对表格标记table应用了边框样式属性border，但是单元格并没有添加任何边框效果。border。2.1CSS控制表格边框

在设置表格的边框时，还要给单元格单独设置相应的边框，在上例的CSS样式代码中添加如下代码：td,th{bor