HTML表格、框架使用大全.ppt

本节小结 本节小结 思考题 框架 表格 主页 静态网站设计 网络技术系：李毓丽 本节小结 本节小结 思考题 框架 表格 主页 使用表格使用表格 制作表格制作表格 添加或删除行和列 格式化表格 为表格添加题注 嵌套表格 本节小结 本节小结 思考题 框架 表格 主页 表格在网页中除了作为一个显表格在网页中除了作为一个显 示对象以外，还有一个重要的作示对象以外，还有一个重要的作 用就是用于排版页面内容用就是用于排版页面内容 制作表格制作表格 本节小结 本节小结 思考题 框架 表格 主页 表格标记表格标记 标标 记记 描描 述述 在在HTMLHTML文档中创始一个文档中创始一个 表格表格 在表格中创建一行在表格中创建一行 在一行中创建一个单元在一行中创建一个单元 格格 在一行中创建一个标题在一行中创建一个标题 单元格单元格 为表格创建题注为表格创建题注 本节小结 本节小结 思考题 框架 表格 主页 基本语法基本语法 与与标记不标记不 同的地方是同的地方是 之间的之间的 内容会内容会加粗加粗且默认且默认 居中居中显示，而显示，而 之间的之间的 内容则内容则不加粗不加粗且默且默 认认居左居左显示显示 本节小结 本节小结 思考题 框架 表格 主页 表格示例表格示例 示例代码示例代码 本节小结 本节小结 思考题 框架 表格 主页 表格中每一行使用一个表格中每一行使用一个 表示；行中的表示；行中的 每一列使用一个每一列使用一个 或或 表表 示示 添加或删除行和列可以分添加或删除行和列可以分 别通过添加或删除行和列别通过添加或删除行和列 标记来实现标记来实现 添加或删除行和列添加或删除行和列 本节小结 本节小结 思考题 框架 表格 主页 添加或删除行和列实现方法添加或删除行和列实现方法 添加新行添加新行 可以通过插入额外的可以通过插入额外的 和和 标记来添加新的一行标记来添加新的一行 在表内创建新列在表内创建新列 可以通过对每一行添加可以通过对每一行添加 或或 标记在表格中创建新的列标记在表格中创建新的列 删除表中的行和列删除表中的行和列 可以通过删除包围指定行和列的可以通过删除包围指定行和列的 标记和标记和 标记来删除表格中标记来删除表格中 的列和行的列和行 本节小结 本节小结 思考题 框架 表格 主页 表格的格式化包括以下一些内容：表格的格式化包括以下一些内容： 为表格添加边框及设置边框粗细及边框为表格添加边框及设置边框粗细及边框 颜色颜色 为表格添加背景图像或背景颜色为表格添加背景图像或背景颜色 指定表格的对齐方式指定表格的对齐方式 设置表格的宽度、高度设置表格的宽度、高度 设置表格单元格内容与边框的间距及单设置表格单元格内容与边框的间距及单 元格之间的间距元格之间的间距 指定行、列的背景图像或背景颜色指定行、列的背景图像或背景颜色 指定行、列内容的对齐方式指定行、列内容的对齐方式 设置行、列的边框颜色设置行、列的边框颜色 设置行、列的宽度和高度设置行、列的宽度和高度 单元格的跨行和跨列设置单元格的跨行和跨列设置 格式化表格格式化表格 本节小结 本节小结 思考题 框架 表格 主页 表格属性表格属性 属属 性性 描描 述述 borderborder设置表格边框宽度，单位为像素（默设置表格边框宽度，单位为像素（默 认不显示边框），设置认不显示边框），设置border=0border=0将取将取 消边框消边框 widthwidth设置表格宽度，单位为像素或设置表格宽度，单位为像素或浏览器浏览器 窗口窗口的百分比的百分比 heightheight设置表格高度，单位为像素或设置表格高度，单位为像素或浏览器浏览器 窗口窗口的百分比的百分比 BordercolorBordercolor、 bordercolordarkbordercolordark、 bordercolorlightbordercolorlight 设置表格边框颜色设置表格边框颜色/ /亮边框颜色（左上亮边框颜色（左上 边框颜色）边框颜色）/ /暗边框颜色（右下边框颜暗边框颜色（右下边框颜 色）色） bgcolorbgcolor设置表格的背景颜色设置表格的背景颜色 backgroundbackground设置表格的背景图像设置表格的背景图像 cellspacingcellspacing设置相邻单元格之间的间距设置相邻单元格之间的间距 cellpaddingcellpadding设置单元格边框与内容的间距设置单元格边框与内容的间距 alignalign设置表格的水平对齐（默认左对齐）设置表格的水平对齐（默认左对齐） 本节小结 本节小结 思考题 框架 表格 主页 表格标记属性设置语法表格标记属性设置语法 本节小结 本节小结 思考题 框架 表格 主页 表格标记属性示例表格标记属性示例 示例代码示例代码 本节小结 本节小结 思考题 框架 表格 主页 行标记行标记属性属性 属属 性性 描描 述述 alignalign设置行中各单元格内容的水平对设置行中各单元格内容的水平对 齐方式（默认左对齐）齐方式（默认左对齐） valignvalign行中各单元格内容内容的垂直对行中各单元格内容内容的垂直对 齐方式（默认居中对齐齐方式（默认居中对齐 bgcolorbgcolor设置行的背景颜色设置行的背景颜色 backgroundbackground设置行的背景图像设置行的背景图像 bordercolorbordercolor设置行的边框颜色设置行的边框颜色 bordercolorlbordercolorl ightight 设置行的亮边框颜色（右下边框设置行的亮边框颜色（右下边框 颜色）颜色） bordercolordbordercolord arkark 设置行的暗边框颜色（左下边框设置行的暗边框颜色（左下边框 颜色）颜色） 本节小结 本节小结 思考题 框架 表格 主页 行标记属性设置语法行标记属性设置语法 本节小结 本节小结 思考题 框架 表格 主页 行标记属性示例行标记属性示例 示例代码示例代码 本节小结 本节小结 思考题 框架 表格 主页 、标记属性标记属性 属属 性性 描描 述述 alignalign设置单元格内容的水平对齐方式（设置单元格内容的水平对齐方式（tdtd的默认左对的默认左对 齐，齐，thth的默认居中对齐）的默认居中对齐） valignvalign设置单元格内容的垂直对齐（默认居中对齐）设置单元格内容的垂直对齐（默认居中对齐） bgcolorbgcolor设置单元格的背景颜色设置单元格的背景颜色 backgroundbackground设置单元格的背景图像设置单元格的背景图像 bordercolorbordercolor设置单元格的边框颜色设置单元格的边框颜色 bordercolorlightbordercolorlight设置单元格的亮边框颜色（右下边框颜色）设置单元格的亮边框颜色（右下边框颜色） bordercolordarkbordercolordark设置单元格的暗边框颜色（左上边框颜色）设置单元格的暗边框颜色（左上边框颜色） width width 设置单元格的宽度，单位为像素或设置单元格的宽度，单位为像素或表格宽度表格宽度的百的百 分比分比 height height 设置单元格的高度设置单元格的高度 rowspanrowspan设置单元格的跨行操作设置单元格的跨行操作 colspancolspan设置单元格的跨列操作设置单元格的跨列操作 nowrapnowrap当文本的宽度超过单元格宽度时，不允许文本在当文本的宽度超过单元格宽度时，不允许文本在 单元格内换行。所有文本在一行内显示单元格内换行。所有文本在一行内显示 本节小结 本节小结 思考题 框架 表格 主页 单元格宽度属性解释单元格宽度属性解释 如果没有设置单元格宽度，则浏览如果没有设置单元格宽度，则浏览 器将会根据单元格中的内容来自动器将会根据单元格中的内容来自动 调整单元格的宽度调整单元格的宽度 如果设置了单元格宽度，但没有设如果设置了单元格宽度，但没有设 置置nowarpnowarp属性，则单元格中的内容属性，则单元格中的内容 在超出了单元格宽度设置允许的情在超出了单元格宽度设置允许的情 况下自动对文本进行换行显示况下自动对文本进行换行显示 如果设置了单元格宽度，但同时又如果设置了单元格宽度，但同时又 设置了设置了nowarpnowarp属性，则此时，单元属性，则此时，单元 格宽度设置不起作用，所有文本将格宽度设置不起作用，所有文本将 在一行内显示在一行内显示 本节小结 本节小结 思考题 框架 表格 主页 单元格标记属性设置语法单元格标记属性设置语法 本节小结 本节小结 思考题 框架 表格 主页 单元格标记属性示例单元格标记属性示例 示例代码示例代码 本节小结 本节小结 思考题 框架 表格 主页 表格各标记属性设置的注意事项表格各标记属性设置的注意事项 表格标记中的表格标记中的bordercolorlightbordercolorlight、 bordercolordarkbordercolordark颜色显示的位置正好颜色显示的位置正好 跟行标记及单元格标记中的这两个属性跟行标记及单元格标记中的这两个属性 相反相反 内层的边框颜色设置会和外层的边框内层的边框颜色设置会和外层的边框 颜色混合成另一种颜色颜色混合成另一种颜色 同时设置背景颜色和背景图像时，背景同时设置背景颜色和背景图像时，背景 颜色将被背景图像覆盖掉颜色将被背景图像覆盖掉 只有较新版的浏览器才支持背景颜色和只有较新版的浏览器才支持背景颜色和 背景图像的设置，不支持背景图像的设背景图像的设置，不支持背景图像的设 置的浏览器会显示浏览器的默认背景颜置的浏览器会显示浏览器的默认背景颜 色来代替图像色来代替图像 本节小结 本节小结 思考题 框架 表格 主页 背景图像属性设置的规则背景图像属性设置的规则 选择基本上不传达信息的小 巧而精致的图像 选择带有较少形状、模式或 颜色的简单图像 选择能够突出文档意图的 图像 在尽可能多的浏览器中查看 带有表格背景图像的HTML文 档，确保跨浏览器的兼容性 本节小结 本节小结 思考题 框架 表格 主页 背景颜色属性设置的规则背景颜色属性设置的规则 如果文本颜色是深色的，应该选择浅如果文本颜色是深色的，应该选择浅 色作为背景颜色色作为背景颜色 如果文本颜色是浅色的，应该选择深如果文本颜色是浅色的，应该选择深 色作为背景颜色色作为背景颜色 选择在美学角度来看令人愉快的颜色选择在美学角度来看令人愉快的颜色 如果表述的主题是快节奏或激动人心如果表述的主题是快节奏或激动人心 的，应该选择明快的颜色的，应该选择明快的颜色 如果表述的是慢节奏和基调忧郁的内如果表述的是慢节奏和基调忧郁的内 容，应该选择暗淡的颜色容，应该选择暗淡的颜色 始终选择始终选择216 216 种无抖动颜色之一种无抖动颜色之一 本节小结 本节小结 思考题 框架 表格 主页 表格题注作用：表格题注作用： 概括表格的内容概括表格的内容 提供关于表格内容的一些信息提供关于表格内容的一些信息 基本语法基本语法 语法解释语法解释 标记之间的就是表格标记之间的就是表格 的标题，这个标记必须在的标题，这个标记必须在 标记对之内使用标记对之内使用 为表格添加题注为表格添加题注 本节小结 本节小结 思考题 框架 表格 主页 标记对齐属性标记对齐属性 属属 性性 描描 述述 alignalign设置水平对齐方式，取设置水平对齐方式，取 值：值：left/center/rightleft/center/right ，默认取，默认取centercenter valignvalign 设置垂直对齐方式，取设置垂直对齐方式，取 值：值：top/bottomtop/bottom，默认，默认 取取toptop 本节小结 本节小结 思考题 框架 表格 主页 表格题注设置示例表格题注设置示例 示例代码示例代码 本节小结 本节小结 思考题 框架 表格 主页 在网页中，排版通常需在网页中，排版通常需 要通过表格的嵌套来完要通过表格的嵌套来完 成成 表格的嵌套是指在一个表格的嵌套是指在一个 表格的表格的单元格单元格中插入另中插入另 一个表格一个表格 嵌套表格嵌套表格 本节小结 本节小结 思考题 框架 表格 主页 表格嵌套设置示例表格嵌套设置示例 示例代码示例代码 本节小结 本节小结 思考题 框架 表格 主页 在网页排版中使用嵌套表格在网页排版中使用嵌套表格 的原因有二的原因有二： 一是利于简化表格制作：网页的排版有时会很一是利于简化表格制作：网页的排版有时会很 复杂，在外部需要有一个表格控制总体布局，复杂，在外部需要有一个表格控制总体布局， 如果这时一些内部排版的细节也通过总表格来如果这时一些内部排版的细节也通过总表格来 实现，容易引起行高列宽等的冲突，给表格制实现，容易引起行高列宽等的冲突，给表格制 作带来困难作带来困难 二是提高浏览器响应速度：浏览器在解析网页二是提高浏览器响应速度：浏览器在解析网页 的时候，是将整个表格的结构下载完毕之后才的时候，是将整个表格的结构下载完毕之后才 显示表格，如果不使用嵌套，表格非常复杂，显示表格，如果不使用嵌套，表格非常复杂， 表格下载耗时相对长，浏览者要等很长时间才表格下载耗时相对长，浏览者要等很长时间才 能看到网页的内容能看到网页的内容 本节小结 本节小结 思考题 框架 表格 主页 小小 结结 制作表格时需要同时使用制作表格时需要同时使用 或或 标记对标记对 表格的内容必须放置在表格的内容必须放置在或或 之间之间 每一行必须使用一个每一行必须使用一个 标记对标记对 行中的所有列都必须放置在行中的所有列都必须放置在 标记对之间标记对之间 通过表格、行及单元格标记的属性，可通过表格、行及单元格标记的属性，可 以对表格进行格式化，如设置显示边框以对表格进行格式化，如设置显示边框 、边框宽度、边框颜色等、边框宽度、边框颜色等 本节小结 本节小结 思考题 框架 表格 主页 在排版网页时通常需要嵌套表格在排版网页时通常需要嵌套表格 ，所谓表格的嵌套，是指在一个，所谓表格的嵌套，是指在一个 表格的单元格中插入另一个表格表格的单元格中插入另一个表格 小小 结结 本节小结 本节小结 思考题 框架 表格 主页 思考题思考题 1. 1. 在显示表格边框，应如何设置在显示表格边框，应如何设置 ？ 2. 2. 如何设置表格的宽度、高度、如何设置表格的宽度、高度、 对齐方式、边框颜色、单元格对齐方式、边框颜色、单元格 间距及单元格边距？间距及单元格边距？ 3. 3. 如何设置单元格的对齐方式、如何设置单元格的对齐方式、 背景颜色、背景图像背景颜色、背景图像? ? 4. 4. 在网页排版时，应如何嵌套表在网页排版时，应如何嵌套表 格格? ? 本节小结 本节小结 思考题 框架 表格 主页 使用框架结构使用框架结构 框架概述 框架结构组成标记 框架集标记 框架标记 不支持框架标记 浮动框架 框架与链接 本节小结 本节小结 思考题 框架 表格 主页 框架概述框架概述 HTML 框架允许在浏览器中同时显 示多个HTML文档 多个页面能够同时在同一浏览器 可独立滚动的窗口中显示 用来把浏览器窗口分成几个独立 的部分 每一部分可以分别包含一个单独 的HTML 文档 借助于框架分割浏览器窗口可以显 著改进外观和可用性 本节小结 本节小结 思考题 框架 表格 主页 框架的特征框架的特征 可以水平或垂直分割 垂直框架具有垂直边框 水平框架具有水平边框 也可以在框架中嵌套框架 在定义框架间的交互之前 必须先设定布局 本节小结 本节小结 思考题 框架 表格 主页 使用框架的优点使用框架的优点 使网页内容看起来更美观 减少了网站的下载时间 提高了网站的可用性 导航部分仍然可见，因为内容在 单独的框架中改变 框架允许开发者将内容与导航和 结构元素分离 有助于轻松、快速地更新内容 本节小结 本节小结 思考题 框架 表格 主页 使用框架的缺点使用框架的缺点 老版本的浏览器不支持框架 开发者需要创建并组织多个文件来充 实页面，使站点创建更复杂 框架结构的Web 站点不允许访问者在 一个框架结构的文档中为页面加入书 签 框架结构的Web 站点会增加服务器负 载，导致过多的文档请求 框架结构的Web 站点会使搜索引擎产 生问题 在框架结构的Web 站点中很难跟踪一 个页面 本节小结 本节小结 思考题 框架 表格 主页 创建框架创建框架 确定要创建的框架大小 创建框架集文档，确定各框架 的位置和特性 指定框架和其中的内容 格式化框架 预先为在非框架结构的浏览器 中显示框架做好准备 注意：使用框架结构时，注意：使用框架结构时，HTMLHTML文档中文档中 不能出现不能出现标记对，此时标记对，此时 需要由需要由代替代替 本节小结 本节小结 思考题 框架 表格 主页 框架结构组成标记框架结构组成标记 框架集标记：主 要是定义浏览器窗口的分割 方式，以及各分割窗口（框 架）的大小 框架标记：定义各 分割窗口中显示的内容，并 能对各分割窗口进行格式化 本节小结 本节小结 思考题 框架 表格 主页 框架集标记框架集标记 框架分割窗口方式： 左右（水平）分割 上下（垂直）分割 嵌套分割：浏览器窗口既 存在左右分割，又存在上 下分割 本节小结 本节小结 思考题 框架 表格 主页 左右分割左右分割 基本语法 . 本节小结 本节小结 思考题 框架 表格 主页 语法解释 cols属性决定了窗口的分割方 式为左右分割；“value”定义 各个框架的大小，单位可以是 像素，也可以是百分比；value 的个数决定了标记的个 数，即窗口的个数，而value的 值则决定了相应窗口的大小 本节小结 本节小结 思考题 框架 表格 主页 左右分割示例左右分割示例 本节小结 本节小结 思考题 框架 表格 主页 上下分割上下分割 基本语法: . 本节小结 本节小结 思考题 框架 表格 主页 语法解释语法解释 rows属性决定了窗口的分割方式为 上下分割；“value”定义各个框架 的大小，单位可以是像素，也可以 是百分比；value的个数决定了 标记的个数，即窗口的个数 ，而value的值则决定了相应窗口的 大小 本节小结 本节小结 思考题 框架 表格 主页 上下分割示例上下分割示例 本节小结 本节小结 思考题 框架 表格 主页 嵌套分割嵌套分割 基本语法 . 本节小结 本节小结 思考题 框架 表格 主页 嵌套分割示例嵌套分割示例 本节小结 本节小结 思考题 框架 表格 主页 嵌套分割示例结果嵌套分割示例结果 本节小结 本节小结 思考题 框架 表格 主页 对框架边框的格式化对框架边框的格式化 属属 性性 属性值属性值描描 述述 borderborder n n 设置设置所有所有框架边框宽度，此属性必须框架边框宽度，此属性必须 和和frameborderframeborder一起使用才有效一起使用才有效 bordercolorbordercolor以以RGBRGB颜色值或颜色英文名设置所有框颜色值或颜色英文名设置所有框 架边框颜色架边框颜色 framespacingframespacing n n 设置所有框架边框宽度，此属性必须设置所有框架边框宽度，此属性必须 和和frameborderframeborder一起使用才有效一起使用才有效 FrameBorderFrameBorder 0 0 所有框架都不显示边框（用于所有框架都不显示边框（用于IEIE浏览浏览 器）器） 1 1 所有框架都显示边框（用于所有框架都显示边框（用于IEIE浏览器浏览器 ），），默认为默认为1 1 yesyes所有框架都显示边框（用于所有框架都显示边框（用于NavigateNavigate 浏览器）浏览器） nono所有框架都不显示边框（用于所有框架都不显示边框（用于 NavigateNavigate浏览器浏览器 本节小结 本节小结 思考题 框架 表格 主页 框架标记框架标记 基本语法 . 本节小结 本节小结 思考题 框架 表格 主页 语法解释 src属性用于设置在框架窗 口中显示的内容来自的文件 ；name属性用于标记框架名 称，以便于其他对象对它的 引用，如作为链接的一个目 标窗口 框架标记框架标记 本节小结 本节小结 思考题 框架 表格 主页 标记属性设置示例标记属性设置示例 本节小结 本节小结 思考题 框架 表格 主页 属属 性性 属性值属性值描描 述述 SrcSrcURLURL设置在框架中显示的文件的路径设置在框架中显示的文件的路径 NameName设置设置Frame Frame 名称，以便于其它对象对它的引用名称，以便于其它对象对它的引用 FrameBorderFrameBorder 0 0 不显示边框（用于不显示边框（用于IEIE浏览器）浏览器） 1 1 显示边框（用于显示边框（用于IEIE浏览器），浏览器），默认为默认为1 1 yesyes显示边框（用于显示边框（用于NavigateNavigate浏览器）浏览器） nono不显示边框（用于不显示边框（用于NavigateNavigate浏览器）浏览器） ScrollingScrolling yesyes显示滚动条显示滚动条 nono不显示滚动条不显示滚动条 autoauto根据页面的长度自动判断是否显示滚动条，根据页面的长度自动判断是否显示滚动条，默默 认自动认自动 NoresizeNoresize设置框架能否改变大小设置框架能否改变大小 MarginwidthMarginwidth n n 以像素为单位，设置框架边框与页面内容的左以像素为单位，设置框架边框与页面内容的左 右页边距右页边距 MarginheighMarginheigh t t n n 以像素为单位，设置框架边框与页面内容的上以像素为单位，设置框架边框与页面内容的上 下的页边距下的页边距 bordercolorbordercolor以以RGBRGB颜色值或颜色英文名设置框架边框颜色颜色值或颜色英文名设置框架边框颜色 标记属性标记属性 本节小结 本节小结 思考题 框架 表格 主页 框架属性说明 使用框架的属性，可设置框 架显示的内容以及对框架进 行格式化 对框架的格式化包括更改边 框、调整页边距和指定颜色 以及由访问者对它的使用实 行控制 标记属性标记属性 本节小结 本节小结 思考题 框架 表格 主页 框架综合示例 框架综合示例代码 本节小结 本节小结 思考题 框架 表格 主页 浮动框架浮动框架 浮动框架是一种特殊的框架页 面，其作为HTML文档的一部分 ，就象图像一样出现在HTML文 档中。浮动框架允许将一个 HTML文档插入到另一个HTML文 档内部的某个区域。 使用浮动框架时必须设置该框 架的大小，即框架的高度和宽 度 本节小结 本节小结 思考题 框架 表格 主页 基本语法 浮动框架浮动框架 本节小结 本节小结 思考题 框架 表格 主页 语法解释参见下表语法解释参见下表 属属 性性 属性值属性值描描 述述 srcsrcURLURL设置浮动框架中显示页面源文件的路径设置浮动框架中显示页面源文件的路径 widthwidth n n 设置浮动框的宽度设置浮动框的宽度 heightheight n n 设置浮动框的高度设置浮动框的高度 namename设置浮动框的名称，以便于其他对象引用它设置浮动框的名称，以便于其他对象引用它 alignalign设置浮动框相对于浏览器窗口的对齐方式设置浮动框相对于浏览器窗口的对齐方式 frameborderframeborder设置浮动框架显示状态，与普通框架同设置浮动框架显示状态，与普通框架同 framespacingfram