HTML表格、框架-使用大全

1、静态网站设计网络技术系：李毓丽.运用表格制造表格添加或删除行和列格式化表格为表格添加题注嵌套表格. 表格在网页中除了作为一个显示对象以外，还有一个重要的作用就是用于排版页面内容制造表格.表格标志标 记 描 述在HTML文档中创始一个表格在表格中创建一行在一行中创建一个单元格在一行中创建一个标题单元格为表格创建题注.根本语法 与标志不同的地方是之间的内容会加粗且默许居中显示，而之间的内容那么不加粗且默许居左显示.表格例如 示例代码.表格中每一行运用一个表示；行中的每一列运用一个或表示添加或删除行和列可以分别经过添加或删除行和列标志来实现添加或删除行和列.添加或删除行和列实现方法添加新行 可以经过

2、插入额外的 和 标志来添加新的一行在表内创建新列 可以经过对每一行添加 或 标志在表格中创建新的列删除表中的行和列 可以经过删除包围指定行和列的 标志和 标志来删除表格中的列和行.表格的格式化包括以下一些内容：为表格添加边框及设置边框粗细及边框颜色为表格添加背景图像或背景颜色指定表格的对齐方式设置表格的宽度、高度设置表格单元格内容与边框的间距及单元格之间的间距指定行、列的背景图像或背景颜色指定行、列内容的对齐方式设置行、列的边框颜色设置行、列的宽度和高度单元格的跨行和跨列设置格式化表格.表格属性属 性 描 述border设置表格边框宽度，单位为像素（默认不显示边框），设置border=0将取消

3、边框width设置表格宽度，单位为像素或浏览器窗口的百分比height设置表格高度，单位为像素或浏览器窗口的百分比Bordercolor、bordercolordark、bordercolorlight设置表格边框颜色/亮边框颜色（左上边框颜色）/暗边框颜色（右下边框颜色）bgcolor设置表格的背景颜色background设置表格的背景图像cellspacing设置相邻单元格之间的间距cellpadding设置单元格边框与内容的间距align设置表格的水平对齐（默认左对齐）.表格标志属性设置语法 .表格标志属性例如 例如代码.行标志属性属 性 描 述align设置行中各单元格内容的水平对齐方

4、式（默认左对齐）valign行中各单元格内容内容的垂直对齐方式（默认居中对齐bgcolor设置行的背景颜色background设置行的背景图像bordercolor设置行的边框颜色bordercolorlight设置行的亮边框颜色（右下边框颜色）bordercolordark设置行的暗边框颜色（左下边框颜色）.行标志属性设置语法.行标志属性例如 示例代码.、标志属性属 性 描 述align设置单元格内容的水平对齐方式（td的默认左对齐，th的默认居中对齐）valign设置单元格内容的垂直对齐（默认居中对齐）bgcolor设置单元格的背景颜色background设置单元格的背景图像borderc

5、olor设置单元格的边框颜色bordercolorlight设置单元格的亮边框颜色（右下边框颜色）bordercolordark设置单元格的暗边框颜色（左上边框颜色）width 设置单元格的宽度，单位为像素或表格宽度的百分比height 设置单元格的高度rowspan设置单元格的跨行操作colspan设置单元格的跨列操作nowrap当文本的宽度超过单元格宽度时，不允许文本在单元格内换行。所有文本在一行内显示.单元格宽度属性解释假设没有设置单元格宽度，那么阅读器将会根据单元格中的内容来自动调整单元格的宽度假设设置了单元格宽度，但没有设置nowarp属性，那么单元格中的内容在超出了单元格宽度设置允

6、许的情况下自动对文本进展换行显示假设设置了单元格宽度，但同时又设置了nowarp属性，那么此时，单元格宽度设置不起作用，一切文本将在一行内显示.单元格标志属性设置语法.单元格标志属性例如示例代码.表格各标志属性设置的本卷须知表格标志中的bordercolorlight、bordercolordark颜色显示的位置正好跟行标志及单元格标志中的这两个属性相反 内层的边框颜色设置会和外层的边框颜色混合成另一种颜色同时设置背景颜色和背景图像时，背景颜色将被背景图像覆盖掉只需较新版的阅读器才支持背景颜色和背景图像的设置，不支持背景图像的设置的阅读器会显示阅读器的默许背景颜色来替代图像.背景图像属性设置的

7、规那么选择根本上不传达信息的小巧而精致的图像选择带有较少外形、方式或颜色的简单图像 选择可以突出文档意图的图像在尽能够多的阅读器中查看带有表格背景图像的HTML文档，确保跨阅读器的兼容性.背景颜色属性设置的规那么假设文本颜色是深色的，应该选择淡色作为背景颜色假设文本颜色是淡色的，应该选择深色作为背景颜色选择在美学角度来看令人愉快的颜色假设表述的主题是快节拍或激动人心的，应该选择明快的颜色假设表述的是慢节拍和基调忧郁的内容，应该选择暗淡的颜色一直选择216 种无抖动颜色之一.表格题注作用：概括表格的内容提供关于表格内容的一些信息根本语法 语法解释 标志之间的就是表格的标题，这个标志必需在标志对之

8、内运用为表格添加题注.标志对齐属性属 性 描 述align设置水平对齐方式，取值：left/center/right，默认取centervalign设置垂直对齐方式，取值：top/bottom，默认取top.表格题注设置例如 示例代码.在网页中，排版通常需求经过表格的嵌套来完成表格的嵌套是指在一个表格的单元格中插入另一个表格嵌套表格.表格嵌套设置例如示例代码.在网页排版中运用嵌套表格的缘由有二：一是利于简化表格制造：网页的排版有时会很复杂，在外部需求有一个表格控制总体规划，假设这时一些内部排版的细节也经过总表格来实现，容易引起行高列宽等的冲突，给表格制造带来困难二是提高阅读器呼应速度：阅读器在

9、解析网页的时候，是将整个表格的构造下载终了之后才显示表格，假设不运用嵌套，表格非常复杂，表格下载耗时相对长，阅读者要等很长时间才干看到网页的内容.小 结制造表格时需求同时运用或标志对表格的内容必需放置在或之间每一行必需运用一个标志对行中的一切列都必需放置在标志对之间经过表格、行及单元格标志的属性，可以对表格进展格式化，如设置显示边框、边框宽度、边框颜色等.在排版网页时通常需求嵌套表格，所谓表格的嵌套，是指在一个表格的单元格中插入另一个表格小 结.思索题1. 在显示表格边框，应如何设置？2. 如何设置表格的宽度、高度、对齐方式、边框颜色、单元格间距及单元格边距？ 3. 如何设置单元格的对齐方式、

10、背景颜色、背景图像?4. 在网页排版时，应如何嵌套表格?.运用框架构造框架概述框架构造组成标志框架集标志框架标志不支持框架标志浮动框架框架与链接.框架概述HTML 框架允许在阅读器中同时显示多个HTML文档多个页面可以同时在同一阅读器可独立滚动的窗口中显示用来把阅读器窗口分成几个独立的部分每一部分可以分别包含一个单独的HTML 文档借助于框架分割阅读器窗口可以显著改良外观和可用性.框架的特征可以程度或垂直分割垂直框架具有垂直边框程度框架具有程度边框也可以在框架中嵌套框架在定义框架间的交互之前必需先设定规划.运用框架的优点使网页内容看起来更美观减少了网站的下载时间提高了网站的可用性导航部分依然可

11、见，由于内容在单独的框架中改动框架允许开发者将内容与导航和构造元素分别有助于轻松、快速地更新内容.运用框架的缺陷老版本的阅读器不支持框架开发者需求创建并组织多个文件来充实页面，使站点创建更复杂框架构造的Web 站点不允许访问者在一个框架构造的文档中为页面参与书签框架构造的Web 站点会添加效力器负载，导致过多的文档恳求框架构造的Web 站点会使搜索引擎产生问题在框架构造的Web 站点中很难跟踪一个页面.创建框架确定要创建的框架大小创建框架集文档，确定各框架的位置和特性指定框架和其中的内容格式化框架预先为在非框架构造的阅读器中显示框架做好预备 留意：运用框架构造时，HTML文档中不能出现标志对，

12、此时需求由替代.框架构造组成标志框架集标志：主要是定义阅读器窗口的分割方式，以及各分割窗口框架的大小框架标志：定义各分割窗口中显示的内容，并能对各分割窗口进展格式化.框架集标志框架分割窗口方式：左右程度分割上下垂直分割嵌套分割：阅读器窗口既存在左右分割，又存在上下分割 .左右分割根本语法 .语法解释 cols属性决议了窗口的分割方式为左右分割；“value定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决议了标志的个数，即窗口的个数，而value的值那么决议了相应窗口的大小.左右分割例如 .上下分割根本语法: . .语法解释 rows属性决议了窗口的分割方式为上下分割；“v

13、alue定义各个框架的大小，单位可以是像素，也可以是百分比；value的个数决议了标志的个数，即窗口的个数，而value的值那么决议了相应窗口的大小.上下分割例如 . 嵌套分割根本语法 .嵌套分割例如 .嵌套分割例如结果.对框架边框的格式化属 性 属性值描 述bordern设置所有框架边框宽度，此属性必须和frameborder一起使用才有效bordercolor以RGB颜色值或颜色英文名设置所有框架边框颜色framespacingn设置所有框架边框宽度，此属性必须和frameborder一起使用才有效FrameBorder0所有框架都不显示边框（用于IE浏览器）1所有框架都显示边框（用于IE

14、浏览器），默认为1yes所有框架都显示边框（用于Navigate浏览器）no所有框架都不显示边框（用于Navigate浏览器.框架标志根本语法 . .语法解释 src属性用于设置在框架窗口中显示的内容来自的文件；name属性用于标志框架称号，以便于其他对象对它的援用，如作为链接的一个目的窗口框架标志.标志属性设置例如 .属 性 属性值描 述SrcURL设置在框架中显示的文件的路径Name设置Frame 名称，以便于其它对象对它的引用FrameBorder0不显示边框（用于IE浏览器）1显示边框（用于IE浏览器），默认为1yes显示边框（用于Navigate浏览器）no不显示边框（用于Navig

15、ate浏览器）Scrollingyes显示滚动条no不显示滚动条auto根据页面的长度自动判断是否显示滚动条，默认自动Noresize设置框架能否改变大小Marginwidthn以像素为单位，设置框架边框与页面内容的左右页边距Marginheightn以像素为单位，设置框架边框与页面内容的上下的页边距bordercolor以RGB颜色值或颜色英文名设置框架边框颜色标志属性.框架属性阐明运用框架的属性，可设置框架显示的内容以及对框架进展格式化对框架的格式化包括更改边框、调整页边距和指定颜色以及由访问者对它的运用实行控制标志属性. 框架综合例如 框架综合例如代码.浮动框架浮动框架是一种特殊的框架页

16、面，其作为HTML文档的一部分，就象图像一样出如今HTML文档中。浮动框架允许将一个HTML文档插入到另一个HTML文档内部的某个区域。运用浮动框架时必需设置该框架的大小，即框架的高度和宽度.根本语法 浮动框架. 语法解释参见下表属 性 属性值描 述srcURL设置浮动框架中显示页面源文件的路径widthn设置浮动框的宽度heightn设置浮动框的高度name设置浮动框的名称，以便于其他对象引用它align设置浮动框相对于浏览器窗口的对齐方式frameborder设置浮动框架显示状态，与普通框架同framespacing设置浮动框架边框宽度，与普通框架同scrolling设置浮动框架滚动条显示

17、属性，与普通框架同noresize设置浮动框架尺寸调整属性，与普通框架同bordercolor设置浮动框架边框颜色，与普通框架同marginheightn浮动框架边框与页内容上下间距，与普通框架同marginwidthn浮动框架边框与页内容左右间距，与普通框架同.浮动框例如 .框架与链接框架的一个重要目的是在不同的框架中显示不同的页面，经过链接目的窗口的设置可实现这一目的详细实现方法：将框架的框架名属性值作为超链接的target的属性值.普通框架与链接例如例如.浮动框架与链接例如效果浮动框架与链接例如.小 结框架的作用是将阅读器窗口分割成假设干个区域，每个区域可分别显示不同的页面框架对阅读器窗口的分割方式有：左右分割、上下分割和嵌套分割框架的组成标志有和运用框架构造时，HTML文档中不能出现。需求由替代.窗口分割方