BTC-CS-HTML-01-第3章-HTML表格和框架课件.pptx

1、第第3 3章章 HTMLHTML表格和框架表格和框架本章目标本章目标u了解表格和框架的定义和作用了解表格和框架的定义和作用u掌握表格元素和框架元素的使用规则，以及常用属性掌握表格元素和框架元素的使用规则，以及常用属性u能够灵活的运用表格元素和框架元素开发静态网页能够灵活的运用表格元素和框架元素开发静态网页2HTML HTML 表格元素表格元素u表格是由行和列组成的结构化数据集表格是由行和列组成的结构化数据集(表格数据表格数据)，通过，通过在行和列的标题之间进行视觉关联的方法，就可以让信在行和列的标题之间进行视觉关联的方法，就可以让信息能够很简单地被解读出来。息能够很简单地被解读出来。3表格的基

2、本结构表格的基本结构u每个表格均有若干行，每行被分割为若干单元格。数据每个表格均有若干行，每行被分割为若干单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。线、表格等。4表格标签表格标签u表格是通过表格是通过,等标签来完成等标签来完成的的5标签描述定义表格。定义表格的页眉。定义表格的主体。定义表格的页脚。定义表格的行。定义表格的表头。定义表格单元。定义表格标题。定义用于表格列的属性。定义表格列的组。表格标签表格标签utabletable标签标签l 标签定义 HTML表格。一个HTML表格包括 元素，一个或多个、以及 元素。元

3、素定义表格行，元素定义表头，元素定义表格单元。l常用属性6属性值描述borderpixels规定表格单元是否拥有边框。cellpaddingpixelsHTML5 不支持。规定单元边沿与其内容之间的空白。cellspacingpixelsHTML5 不支持。规定单元格之间的空白。frameVoid、above、below、hsides、lhs、rhs、vsides、box、borderHTML5 不支持。规定外侧边框的哪个部分是可见的。rulesnonegroupsrowscolsallHTML5 不支持。规定内侧边框的哪个部分是可见的。summarytextHTML5 不支持。规定表格的摘要

4、。widthpixels%HTML5 不支持。规定表格的宽度。表格标签表格标签utabletable标签标签7表头1表头2内容1内容2表格标签表格标签utabletable标签标签l复杂表格包含了、以及 元素8表格的标题表头1表头2表头3内容1内容2内容3脚注1脚注2脚注2表格标签表格标签utrtr标签标签l 标签定义HTML表格中的行。tr元素包含一个或多个th或td元素。l属性9属性属性值值描述描述alignRight、left、center、justify、char定义表格行的内容对齐方式。bgcolorrgb(x,x,x)#xxxxxxcolorname不赞成使用。请使用样式取而代之。

5、规定表格行的背景颜色。charcharacter规定根据哪个字符来进行文本对齐。charoffnumber规定第一个对齐字符的偏移量。valignTop、middle、bottom、baseline规定表格行中内容的垂直对齐方式。表格标签表格标签uthth标签和标签和tdtd标签标签l 标签定义表格内的表头单元格，标签定义HTML表格中的标准单元格。l属性10属性属性值值描述描述abbrtext规定单元格中内容的缩写版本。alignLeft、right、center、justify、char规定单元格内容的水平对齐方式。axiscategory_name对单元格进行分类。bgcolorrgb(

6、x,x,x)#xxxxxxcolorname不推荐使用。请使用样式替代它。规定表格单元格的背景颜色。charcharacter规定根据哪个字符来进行内容的对齐。charoffnumber规定对齐字符的偏移量。colspannumber设置单元格可横跨的列数。headersidrefs由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息。heightpixels%不推荐使用。请使用样式替代它。规定表格单元格的高度。nowrapnowrap不推荐使用。请使用样式取而代之。规定单元格中的内容是否折行。rowspannumber规定单元格可横跨的行数。scopeCol、colgroup、row

7、、rowgroup定义将表头数据与单元数据相关联的方法。valignTop、middle、bottom、Baseline规定单元格内容的垂直排列方式。widthpixels%不推荐使用。请使用样式取而代之。规定表格单元格的宽度。表格标签表格标签uthth标签和标签和tdtd标签标签l跨多列的语法：l跨多行的语法：11 项目名称项目名称计划计划投入投入实际投入实际投入 计划用时计划用时计划完成日期计划完成日期实际用时实际用时完成日期完成日期 项目一项目一5个月个月2009/10/167个月个月2009/12/30 项目二项目二3个月个月2010/6/104个月个月2010/7/20 HTMLHT

8、ML框架框架u框架的作用是把浏览器窗口分割成几个独立的小窗口，框架的作用是把浏览器窗口分割成几个独立的小窗口，每个小窗口可以显示不同页面的内容，这样就可以同时每个小窗口可以显示不同页面的内容，这样就可以同时浏览若干个网页浏览若干个网页。u两种：两种：l一种为普通框架；l另一种为内嵌框架。12框架标签框架标签u框架相关标签框架相关标签13标签描述定义一个框架集，框架集是若干框架的集合，利用框架集可以定义框架结构，实现分割浏览器窗口的功能。定义 frameset 中的一个特定的窗口（框架）。noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素

9、内部。定义内联的子窗口（框架）框架标签框架标签uframesetframeset和和frameframe标签标签14框架标签框架标签uframesetframeset和和frameframe标签标签l frameset标签有一个必需的属性：rows或colsl 定义了文档窗口中框架或嵌套的框架集的行或列的大小及数目。15属性值描述colspixels%*定义框架集中列的数目和尺寸。rowspixels%*定义框架集中列的数目和尺寸。框架标签框架标签uframesetframeset和和frameframe标签标签l frame标签属性16属性值描述frameborder0无边框。1有边框（默认

10、值）。规定是否显示框架周围的边框。出于实用性方面的原因，最好不用设置该属性，请使用 CSS 来应用边框样式和颜色。marginheightpixels规定框架内容与框架的上方和下方之间的高度，以像素计。marginwidthpixels规定框架内容与框架的左侧和右侧之间的高度，以像素计。namename规定框架的名称。用于在 JavaScript 中引用元素，或者作为链接的目标。noresizenoresize规定无法调整框架的大小。scrollingyes始终显示滚动条（即使不需要）。no从不显示滚动条（即使需要）。auto在需要的时候显示滚动条。规定是否在框架中显示滚动条。默认地，如果内容

11、大于框架，就会出现滚动条。srcURL规定在框架中显示的文档的 URL。框架标签框架标签uframesetframeset和和frameframe标签标签17 Your browser does not handle frames!内联框架内联框架u通过内联框架可以实现在网页中通过内联框架可以实现在网页中“插入插入”网页网页u使用使用iframeiframe标签来表示，标签来表示，iframeiframe是是inner frameinner frame的的简写。简写。18内联框架内联框架uframeframe与与iframeiframe功能功能基本基本相同相同u区别区别liframe比fram

12、e具有更多的灵活性。lframe是整个页面的框架，iframe是内嵌的网页元素liframe可以在同一个页面中多次显示同一内容，而不必重复这段内容的代码。19内联框架内联框架uiframeiframe常用属性常用属性20属性值描述frameborder0无边框。1有边框（默认值）。规定是否显示框架周围的边框。出于实用性方面的原因，最好不用设置该属性，请使用 CSS 来应用边框样式和颜色。marginheightpixels规定 iframe 的顶部和底部的空白边距，以像素计。marginwidthpixels规定 iframe 的左边和右边的空白边距，以像素计。namename规定iframe

13、的名称。用于在 JavaScript 中引用元素，或者作为链接的目标。scrollingyes始终显示滚动条（即使不需要）。no从不显示滚动条（即使需要）。auto在需要的时候显示滚动条。规定是否在iframe中显示滚动条。默认地，如果内容大于框架，就会出现滚动条。srcURL规定在iframe中显示的文档的 URL。heightpixels以像素计的高度值（比如 100px）。%以包含元素百分比计的高度值（比如 20%）。规定 iframe 的高度。widthpixels以像素计的高度值（比如 100px）。%以包含元素百分比计的高度值（比如 20%）。规定 iframe 的宽度。内联框架内联框架u实例实例21 第一页 第二页 第三页 本本章章总结总结uHTMLHTML表格元素、表格元素、HTMLHTML框架框架元素元素u表格表格和框架的作用，相关标签（和框架的作用，相关标签（tabletable、trtr、tdtd、thth、cationcation、framesetframeset、frameframe、noframesnoframes、iframeiframe等等）u每个每个标签的用法、属性、属性标签的用法、属性、属性取值取值。22谢谢谢谢!23