网页设计与制作 课件 17 制作表格数据展示.pptxVIP

;入门测

作业分析

知识回顾

项目目录结构：imgaes目录、css目录，例如：

网页整体布局：树立整体意识，先写大盒子，再写嵌套小盒子

组件化拼搭思维：头部、底部、侧边栏等共性内容的复用

;在网页设计与制作中，表格兼具数据展示与局部布局的双重功能。它不仅能够清晰呈现结构化数据，还能通过合理的样式设计实现复杂的页面排版效果。

本任务学习表格的HTML标签与CSS样式技巧，使用表格展示垃圾分类科普教育页面，效果如图。

;表格主要标签

表格常用属性

表格样式设置;表格通常应用于表格数据展示，使网页元素有条理地显示。

表格的主要标签如下表:;练一练

;表格常用属性;练一练

;表格常用样式设置

设置表格宽度：width

设置边框：表格边框、单元格边框、边框折叠

table,th,td{

border:1pxsolid#ddd;

border-collapse:collapse;/*边框折叠*/

}

;表格常用样式设置

设置表格宽度：width

设置边框：表格边框、单元格边框、边框折叠

控制单元格边距：内边距(padding）、外边距（margin)

th,td{

margin:10px;

padding:10px15px;

}

;表格常用样式设置

设置表格宽度：width

设置边框：表格边框、单元格边框、边框折叠

控制单元格边距：内边距(padding）、外边距