PPT
【文档说明】BTC-CS-HTML-01-第3章-HTML表格和框架课件.pptx，共(23)页，1.617 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-2813.html
以下为本文档部分文字说明：
第3章HTML表格和框架本章目标◆了解表格和框架的定义和作用◆掌握表格元素和框架元素的使用规则，以及常用属性◆能够灵活的运用表格元素和框架元素开发静态网页2HTML表格元素◆表格是由行和列组成的结构化数据集(表格数据)，通过在行和列的
标题之间进行视觉关联的方法，就可以让信息能够很简单地被解读出来。3表格的基本结构◆每个表格均有若干行，每行被分割为若干单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。4表格标签◆表格是通过<table>,<th>,<
tr>,<td>等标签来完成的5标签描述<table>…</table>定义表格。<thead>…</thead>定义表格的页眉。<tbody>…</tbody>定义表格的主体。<tfoot>…</tfoot>定义表格的页脚。<tr>…</tr>定义表格
的行。<th>…</th>定义表格的表头。<td>…</td>定义表格单元。<caption>…</caption>定义表格标题。<col/>定义用于表格列的属性。<colgroup>…</colgroup>定义表格列的
组。表格标签◆table标签⚫<table>标签定义HTML表格。一个HTML表格包括<table>元素，一个或多个<tr>、<th>以及<td>元素。<tr>元素定义表格行，<th>元素定义表头，<td>元素定义表格单元。⚫常用属性6属性值描述borde
rpixels规定表格单元是否拥有边框。cellpaddingpixelsHTML5不支持。规定单元边沿与其内容之间的空白。cellspacingpixelsHTML5不支持。规定单元格之间的空白。frameVoid、above
、below、hsides、lhs、rhs、vsides、box、borderHTML5不支持。规定外侧边框的哪个部分是可见的。rulesnonegroupsrowscolsallHTML5不支持。规定
内侧边框的哪个部分是可见的。summarytextHTML5不支持。规定表格的摘要。widthpixels%HTML5不支持。规定表格的宽度。表格标签◆table标签7<tableborder=1><tr><th>表头1</th><th>表头2</th></t
r><tr><td>内容1</td><td>内容2</td></tr></table>表格标签◆table标签⚫复杂表格包含了<caption>、<col>、<thead>、<tfoot>以及<tbody>元素8<tablewidth="400"border="1"><ca
ption>表格的标题</caption><colalign="left"/><colalign="left"/><colalign="left"/><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr></thead><tbody><
tr><td>内容1</td><td>内容2</td><td>内容3</td></tr></tbody><tfoot><tr><td>脚注1</td><td>脚注2</td><td>脚注2</td></tr></tfoot></table>表格标签◆tr标签⚫<tr>标签定义HTML
表格中的行。tr元素包含一个或多个th或td元素。⚫属性9属性值描述alignRight、left、center、justify、char定义表格行的内容对齐方式。bgcolorrgb(x,x,x)#
xxxxxxcolorname不赞成使用。请使用样式取而代之。规定表格行的背景颜色。charcharacter规定根据哪个字符来进行文本对齐。charoffnumber规定第一个对齐字符的偏移量。valignTop、middle、bottom、baseline规定表格行中
内容的垂直对齐方式。表格标签◆th标签和td标签⚫<th>标签定义表格内的表头单元格，<td>标签定义HTML表格中的标准单元格。⚫属性10属性值描述abbrtext规定单元格中内容的缩写版本。alignLe
ft、right、center、justify、char规定单元格内容的水平对齐方式。axiscategory_name对单元格进行分类。bgcolorrgb(x,x,x)#xxxxxxcolorname不推荐使用。
请使用样式替代它。规定表格单元格的背景颜色。charcharacter规定根据哪个字符来进行内容的对齐。charoffnumber规定对齐字符的偏移量。colspannumber设置单元格可横跨的列数。headersid
refs由空格分隔的表头单元格ID列表，为数据单元格提供表头信息。heightpixels%不推荐使用。请使用样式替代它。规定表格单元格的高度。nowrapnowrap不推荐使用。请使用样式取而代之。规定单元格中的内容是否折行。rowspannumber规定单元格可横跨的
行数。scopeCol、colgroup、row、rowgroup定义将表头数据与单元数据相关联的方法。valignTop、middle、bottom、Baseline规定单元格内容的垂直排列方式。widthpixels%不推荐使用。请使用样式取而代之。规定
表格单元格的宽度。表格标签◆th标签和td标签⚫跨多列的语法：<thcolspan=#><tdcolspan=#>⚫跨多行的语法：<throwspan=#><tdrowspan=#>11<tableborder="1"><tr><throwspan="2">项
目名称</th><thcolspan="2">计划投入</th><thcolspan="2">实际投入</th></tr><tr><th>计划用时</th><th>计划完成日期</th><th>实际用时</th><th>完成日期</th></tr><t
r><td>项目一</td><td>5个月</td><td>2009/10/16</td><td>7个月</td><td>2009/12/30</td></tr><tr><td>项目二</td><td>3个月</td>
<td>2010/6/10</td><td>4个月</td><td>2010/7/20</td></tr></table>HTML框架◆框架的作用是把浏览器窗口分割成几个独立的小窗口，每个小窗口可以显示不同页面的内容，这样就可以同时浏览若干个网页。◆两种：
⚫一种为普通框架；⚫另一种为内嵌框架。12框架标签◆框架相关标签13标签描述<frameset>定义一个框架集，框架集是若干框架的集合，利用框架集可以定义框架结构，实现分割浏览器窗口的功能。<frame>定义frameset中的一个特定的窗口（框架）
。<noframes>noframes元素可为那些不支持框架的浏览器显示文本。noframes元素位于frameset元素内部。<iframe>定义内联的子窗口（框架）框架标签◆frameset和frame标签14框架标签◆frameset和frame标签⚫frameset标签有一个必需的属性
：rows或cols⚫定义了文档窗口中框架或嵌套的框架集的行或列的大小及数目。15属性值描述cols•pixels•%•*定义框架集中列的数目和尺寸。rows•pixels•%•*定义框架集中列的数目和尺寸。框架标
签◆frameset和frame标签⚫frame标签属性16属性值描述frameborder•0无边框。•1有边框（默认值）。规定是否显示框架周围的边框。出于实用性方面的原因，最好不用设置该属性，请使用CSS来应用边框样式和颜色。marginheightpixels规定框架内容与框架的上方
和下方之间的高度，以像素计。marginwidthpixels规定框架内容与框架的左侧和右侧之间的高度，以像素计。namename规定框架的名称。用于在JavaScript中引用元素，或者作为链接的目标。noresizenoresize规定无法调整框架的大小。scrollingyes始终显示滚动
条（即使不需要）。no从不显示滚动条（即使需要）。auto在需要的时候显示滚动条。规定是否在框架中显示滚动条。默认地，如果内容大于框架，就会出现滚动条。srcURL规定在框架中显示的文档的URL。框架标签◆frameset和frame标签17<framesetrows="
25%,50%,*"border="5"><noframes><body>Yourbrowserdoesnothandleframes!</body></noframes><framename=“top"src="demo_01.html"><framename="middle"sr
c="demo_02.html"><framename=“bottom"src="demo_03.html"></frameset>内联框架◆通过内联框架可以实现在网页中“插入”网页◆使用iframe标签来表示，iframe是innerframe的简写。18内联框架◆frame与iframe功
能基本相同◆区别⚫iframe比frame具有更多的灵活性。⚫frame是整个页面的框架，iframe是内嵌的网页元素⚫iframe可以在同一个页面中多次显示同一内容，而不必重复这段内容的代码。19内联框架◆iframe常用属性20属性值描述f
rameborder•0无边框。•1有边框（默认值）。规定是否显示框架周围的边框。出于实用性方面的原因，最好不用设置该属性，请使用CSS来应用边框样式和颜色。marginheightpixels规定iframe的顶部和底部的空白边距，以像素计。marginwidthpixels规定ifr
ame的左边和右边的空白边距，以像素计。namename规定iframe的名称。用于在JavaScript中引用元素，或者作为链接的目标。scrollingyes始终显示滚动条（即使不需要）。no从不显示滚动条（即使需要）。auto在需要的时候显示滚动条。规定是否在iframe中显示滚动条。默
认地，如果内容大于框架，就会出现滚动条。srcURL规定在iframe中显示的文档的URL。height•pixels以像素计的高度值（比如"100px"）。•%以包含元素百分比计的高度值（比如"20%"）。规定iframe的高度。width•pixels以像素计的高度值（
比如"100px"）。•%以包含元素百分比计的高度值（比如"20%"）。规定iframe的宽度。内联框架◆实例21<body><tablealign="center"><tr><td><iframesrc="demo_01.html"name="wind
ow"></iframe><br><br><ahref="demo_01.html"target="window">第一页</A><BR><ahref="demo_02.html"target="window">第二页</A>
<BR><ahref="demo_03.html"target="window">第三页</A><BR></td></tr></table></body>本章总结◆HTML表格元素、HTML框架元素◆表格和框架的作用，相关标签（table、tr、td、th、cation、frames
et、frame、noframes、iframe等）◆每个标签的用法、属性、属性取值。22谢谢!23
辽公网安备 21102102000191号
营业执照
