表格和框架.docx

1、表格和框架表格1.表格的基本格式2.标签下的常用属性3.标签下的边框设置4.标签下的常用属性5.拆分与合并单元格6.表格的结构化、标题7.表格的嵌套在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在HTML中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性也特别多。1 表格的基本格式 格式: 功能: 用来声明表格开始与结束. 用来设置表格的行. 用来设置表头栏. 用来设置数据栏.2 标签下的属性 属性名称 属性值 说明 border 像素设置表格的边框 cellspacing 像素 绝对值，单元格之间的距离

2、 百分比 相对值，单元格之间的距离 cellpadding 像素 绝对值，单元格内容与边框之间的距离百分比 相对值,单元格内容与边框之间的距离 width 像素 绝对值,像素表示表格宽度 百分比 相对值,百分比表表格宽度 height 像素绝对值,像素表示表格高度 百分比 相对值,百分比表示表格高度 align left 表格居左(默认) center 表格居中 right 表格居右 bgcolor 英文/十六 表格的背景颜色 background URL 表格的背景图片 summary 字符串 用来描述表格数据说明 （summary 属性规定表格内容的摘要，不会对普通浏览器中产 生任何视觉变

3、化。屏幕阅读器可以利用该属性。） bordercolor 英文/十六 边框的颜色 bordercolorlight 同上 边框的亮色（IE支持） bordercolordark 同上 边框的暗色3标签下的常用属性 属性名称 属性值 说明 width 像素 绝对设置,以像素值设置宽 百分比 相对设置,以百分比设置宽 height 像素 绝对设置,以像素值设置高 百分比 相对设置,以百分比设置宽 bgcolor 英文/十六 数据栏的颜色设置 align(水平方向) left 数据靠左 center 数据靠中 right 数据靠右 valign(垂直方向) top 数据靠上 middle 数据靠中

4、bottom 数据靠下 nowrap 无 在单元格中换行4表格的标题设置和表头设置（1）表格的标题： . 下的属性值有: 属性名称 属性值 说明 align top 标题在表格上方 bottom 标题在表格下方（2）表头设置 5结构化格式： -表头区 -表体区 -表尾区4表格的边框设置属性名称 属性值 说明 border 像素设置表格的边框 cellspacing 像素 绝对值，单元格之间的距离 百分比 相对值，单元格之间的距离 cellpadding 像素 绝对值，单元格内容与边框之间的距离百分比 相对值,单元格内容与边框之间的距离属性名称 属性值 说明bordercolorlight 英文

5、/十六 边框的亮色（IE支持）bordercolordark 英文/十六 边框的暗色（IE支持） 属性名称 属性值 说明 frame void 不要显现表格的边线 above 只要显现出表格的上边线 below 只显现出表格的下边线 hsides 只显示表格的上下边线 vsides 只显现表格的左右边线 lhs 只显现表格的左边线 rhs 只显现表格的右边线 border/box 会显现出表格的所有边线 rules rows 只显示出横行的格框线 cols 只显示出直行的格框线 all 显示全部格框线 groups 表示列组合水平部分 none 不显示任何格框线5 表格的对其方式（1）表格的对

6、其方式属性名称 属性值 说明 align left 表格居左(默认) center 表格居中 right 表格居右（2）单元格内容的对其方式6 表格大小、背景颜色、背景图案的设置属性名称 属性值 说明 width 像素 绝对值,像素表示表格宽度 百分比 相对值,百分比表表格宽度 height 像素绝对值,像素表示表格高度 百分比 相对值,百分比表示表格高度 bgcolor 英文/十六 表格的背景颜色 background URL 表格的背景图片7合并单元格 属性名称 属性值 说明 colspan 数字 向两边扩展栏位 rowspan 数字 向下扩展栏位8嵌套表格的应用框架1.框架的基本结构2.

7、框架的嵌套3.框架与超链接4.内联框架通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架1 框架的基本结构 格式： 功能说明:用来设置多窗框结构的声明 下的属性： 属性名称 属性值 说明 cols 像素 设置直排的多窗框环境 百分比 同上 rows 像素 设置横排的多窗框环境 百分比 同上 属性格式： 下的属性： 属性名称 属性值 说明 src URL 链接的页面 name 自定义 框架名称 noresize true 允许浏览器自行改变框架大小 false 不允许 scrolling yes 不管网页内容的大小，都出现滚动条

8、 no 不管网页内容的大小，都不现滚动条 auto 浏览器自动判断，是否需要滚动条 marginheight 像素 设置垂直方向，窗体内容与边界的距离 marginwidth 像素 设置水平方向，窗体内容与边界的距离 frameborder 01 不出现框体边/出现窗体边线 属性格式： 2 框架的嵌套 格式： 注意这里没有（标签）3 多框架与超链接框架式网站的好处就是在同一张页面可以显示多个页面，而且可以跟方便的进行链接。 相关属性说明： 的格式： 超链接在相应窗体打开超链接4 内联框架 格式: 功能:它是个内联框架，是在页面里生成个内部框架。 属性名称 属性值 说明 src URL 链接的页面 height 像素/% 绝对/相对高度 width 像素/% 绝对/相对宽度scrolling yes 不管网页内容的大小，都出现滚动条 no 不管网页内容的大小，都不现滚动条 auto 浏览器自动判断，是否需要滚动条 frameborder 01 不出现框体边/出现窗体边线