《网页设计HTML表格基础与布局.pptx》由会员分享，可在线阅读，更多相关《网页设计HTML表格基础与布局.pptx（13页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、会计学1网页设计网页设计HTML表格基础与布局表格基础与布局本课内容本课内容本课内容本课内容n n1、表格标记基础n n2、表格布局及应用n n3、HTML总结及编写注意事项带着求知好学的态度，超越自己，完善自己。第1页/共13页基本语法基本语法基本语法基本语法 单元格内容表格表格中的一行.-定义表格-定义表行-定义表头-定义表元(表格的具体数据)带着求知好学的态度，超越自己，完善自己。第2页/共13页表格的边框及尺寸表格的边框及尺寸表格的边框及尺寸表格的边框及尺寸n n设置边框n n设置表格的宽和高n n单元格之间间隙n n#=value内容与单元格边框距离带着求知好学的态度，超越自己，完善
2、自己。第3页/共13页表格相关颜色设置表格相关颜色设置表格相关颜色设置表格相关颜色设置n n表格边框颜色设置n n 背景颜色设置n n背景图片设置n n 亮边框的颜色n n 暗边框的颜色带着求知好学的态度，超越自己，完善自己。第4页/共13页表格的合并表格的合并表格的合并表格的合并n n1、跨多列的单元格 合并列n n2、跨多行的单元格 合并行n n#为合并的单元格数量带着求知好学的态度，超越自己，完善自己。第5页/共13页表格对齐表格对齐表格对齐表格对齐n nalignn n#=left、rightn n表格相对于网页的位置n n#=left,center,right n n内容相对于单元格
3、的位置带着求知好学的态度，超越自己，完善自己。第6页/共13页HTMLHTML表格补充表格补充表格补充表格补充n n划分表格结构的三个标签：n n（表首）,（表主体）,（表尾）n n目的：对表格的各部分的属性进行统一的设置，而不用单一逐个设置n n注：文字、图片、多媒体等内容只能放或里面带着求知好学的态度，超越自己，完善自己。第7页/共13页注意事项注意事项注意事项注意事项n n1、表格标记必须要有、或者（表头标签）n n2、表格内容必须写在(或th)标签之内带着求知好学的态度，超越自己，完善自己。第8页/共13页表格布局原则表格布局原则表格布局原则表格布局原则n n网页结构是由一些矩形有机组
4、成的，所有的内容都是放在矩形内的。网页结构是由一些矩形有机组成的，所有的内容都是放在矩形内的。这些矩形我们可以用表格来代替这些矩形我们可以用表格来代替表格布局的最基本原则。表格布局的最基本原则。n n网页在浏览器中宽度是一定的，若无限制的放置文字、图片、多媒体网页在浏览器中宽度是一定的，若无限制的放置文字、图片、多媒体等内容，就不能控制好这些内容的位置，可以将内容放在表格的单元格里，等内容，就不能控制好这些内容的位置，可以将内容放在表格的单元格里，只要把表格的形状设置好了，内容也定位好了只要把表格的形状设置好了，内容也定位好了表格布局的直观原因。表格布局的直观原因。n n表格布局的两个技术表格
5、布局的两个技术：n n表格嵌套：分清楚表格的两种功表格嵌套：分清楚表格的两种功能：结构布局能：结构布局(安排页面排版安排页面排版)，内，内容容器容容器(组织和显示信息组织和显示信息)。n n口诀口诀能独立就独立，能成行能独立就独立，能成行就不列就不列n n自适应：口诀自适应：口诀外像素，内百外像素，内百分分带着求知好学的态度，超越自己，完善自己。第9页/共13页HTMLHTML小结小结小结小结n n标签标签:由由包含起来的表示一定含义的包含起来的表示一定含义的htmlhtml单元，分为双标签、单标签。单元，分为双标签、单标签。n n标签属性标签属性:用来表示该标签的具体功能或者某一具体的性质，
6、使用的时候必用来表示该标签的具体功能或者某一具体的性质，使用的时候必须跟随它所属的标签写在同一对须跟随它所属的标签写在同一对内才会有效。内才会有效。n n属性值属性值:属性值就是用数字或其他具有一定含义的名词来表示标签属性的属性值就是用数字或其他具有一定含义的名词来表示标签属性的n n程度。程度。n n编写编写HTMLHTML时注意：时注意：n n1 1、谨记块级元素与行内元素、谨记块级元素与行内元素n n2 2、代码的整洁、代码的整洁 HtmlHtml文档由文档由htmlhtml标签构成，标签含有多种属性，属性有属性值用标签构成，标签含有多种属性，属性有属性值用来表示属性的程度来表示属性的程度带着求知好学的态度，超越自己，完善自己。第10页/共13页本课作业本课作业本课作业本课作业n n利用表格布局编写本课所给的网页实例带着求知好学的态度，超越自己，完善自己。第11页/共13页感谢您的关注！感谢您的关注！第12页/共13页