第四章 表格与框架.pptVIP

第四章 表格与框架 第一页，共十九页，2022年，8月28日 教学目标 能阐述表格的作用 能对表格进行操作 能区分表格和div的功能及选择合适的对象操作 能制作常用的框架页面 第二页，共十九页，2022年，8月28日 教学重难点分析 重点 对表格的操作 对框架的应用 难点 表格的应用与div的区别 第三页，共十九页，2022年，8月28日 一、表格 表格的功能 存放数据，就相当于一个二维表。 与div的区别： Div用来进行大面积的网页布局，而表格用来存放数据， 通常建立好表格后，就不能轻易地改动结构，也不灵活。 第四页，共十九页，2022年，8月28日 表格的语法结构 table width=600 border=0 cellspacing=0 cellpadding=0 tr th scope=colnbsp;/th …… /tr tr tdnbsp;/td …… /tr /table table是表格的标记，表格是由行和列组成， tr代表行，td代表列，th代表标题。 第五页，共十九页，2022年，8月28日 表格的常用属性 区别border、cellpadding、cellspacing分别表示的含义: border: 表格边框的粗细,具有一定的立体感 cellspacing: 划表格的线的粗细. cellpadding: 单元格中的字与单元格边框的距离. HTML border cellspacing cellpadding 第六页，共十九页，2022年，8月28日 表格的拆分 rowspan=“数值“ 表示合并了多少行，比如数值为3，代表合并了3行。 colspan=“数值“ 表示合并了多少列，比如数值为3，代表合并了3列。 第七页，共十九页，2022年，8月28日 背景颜色 使用bgcolor属性设置单元格的背景颜色. bgcolor=#,#是16进制的6位数,格式为rrggbb,分别表示红、绿、蓝三色的分量,或者是16种已经定义好的颜色名称. 什么是16进制? 二进制: 0和1组成 十进制: 由0到9共10位数组成. 十六进制:由0到9再加上A到F组成 在颜色中, #000000表示黑色, #FFFFFF 表示白色. 什么是RGB? 白光可以解析为红、橙、 黄、绿、蓝、靛、紫,我们 把其中的红、绿、蓝当作三基色,因为他们的混合可以 产生其他的颜色.红色用red表示,绿用green表示,蓝用 blue表示,所以就有RGB表示三基色. 第八页，共十九页，2022年，8月28日 表格可以设置背景颜色和背景图片 利用background-color和background属性 第九页，共十九页，2022年，8月28日 表格文本的对齐 在水平方向上，文本的对齐用align=#表示，#可以为left（左对齐）、right（右对齐）、center（居中对齐）三者之一。 在垂直方向上，文本的对齐用valign=#表示，#是top（顶端对齐）、middle（文本中线与表格中线对齐）、bottom（底端对齐）、baseline（文本基线与表格中线对齐）四者之一。 第十页，共十九页，2022年，8月28日 利用表格的拆分、背景、对齐、边框等属性制作课程表。 第十一页，共十九页，2022年，8月28日 表格与div布局的对比案例 相册.html 第十二页，共十九页，2022年，8月28日 表格的缺点 死板、不灵活、不易改动布局、样式设置单一、代码复杂，不够简洁。 所以，表格一般不用来网页布局，而是在网页内部作为数据展示的工具。 一旦做好后，不易修改。 第十三页，共十九页，2022年，8月28日 7. 使用框架 基本结构 frameset frame src=“URL” frame src=“URL” …… /frameset noframes浏览器不支持框架/noframes 第十四页，共十九页，2022年，8月28日