HTML培训课程-------Day02（表格和框架）

表格

在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在HTML中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性也特别多。

       通过本章节对表格的学习，需要掌握：1如何设置不同样式的表格；2如何设置不规则表格；3如何运用表格进行页面布局。

表格的基本格式

格式:

<table>

<tr>…

<th>… </th>

<th>… </th>

<th>… </th>

</tr>

<tr>

<td>… </td>

<td>… </td>

<td>… </td>

</tr>

</table>

功能: <table>…</table>用来声明表格开始与结束.

<tr>…</tr>用来设置表格的行.

<th>…</th>用来设置表头栏.

<td>…</td>用来设置数据栏.

<table>标签下的属性

属性名称                     属性值                  说明

border                          像素        设置表格的边框

cellspacing                   像素            绝对值，单元格之间的距离

百分比          相对值，单元格之间的距离

cellpadding                  像素          绝对值，单元格内容与边框之间的距离

百分比        相对值, 单元格内容与边框之间的距离

width                           像素            绝对值,像素表示表格宽度

百分比          相对值,百分比表表格宽度

height                         像素        绝对值,像素表示表格高度

百分比          相对值,百分比表示表格高度

align                                left                     表格居左(默认)

center            表格居中

right                   表格居右

bgcolor                        英文/十六      表格的背景颜色

background           URL         表格的背景图片

bordercolor                  英文/十六      边框的颜色

bordercolorlight           同上              边框的亮色（IE支持）

bordercolordark         同上              边框的暗色

<tr><th><td>标签下的常用属性

 

属性名称                     属性值                 说明

width                         像素                     绝对设置,以像素值设置宽                                                                百分比                 相对设置,以百分比设置宽

height                         像素                     绝对设置,以像素值设置高

百分比                 相对设置,以百分比设置宽

bgcolor                        英文/十六             数据栏的颜色设置

align(水平方向)           left                       数据靠左

center                   数据靠中

right                         数据靠右

valign(垂直方向)      top                       数据靠上

middle                  数据靠中

bottom                 数据靠下

nowrap                        无                        在单元格中换行

表格的标题设置和表头设置

（1）表格的标题：

<table>

<caption>….</caption>

</table>

<caption>下的属性值有:

属性名称                     属性值                 说明

align                            top                    标题在表格上方

bottom            标题在表格下方

（2）表头设置<th>

结构化格式：

<table>

<thead>……</thead>    --------表头区

<tbody>……</tbody>    --------表体区

………………………

<tfoot>……</tfoot>      --------表尾区

</table>

表格的边框设置

属性名称                     属性值                  说明

border                        像素       设置表格的边框

cellspacing                   像素            绝对值，单元格之间的距离

百分比          相对值，单元格之间的距离

cellpadding                  像素         绝对值，单元格内容与边框之间的距离

百分比       相对值, 单元格内容与边框之间的距离

属性名称                     属性值                  说明

bordercolorlight           英文/十六             边框的亮色（IE支持）

bordercolordark         英文/十六            边框的暗色（IE支持）

属性名称                   属性值                 说明

frame                            void                   不要显现表格的边线

该属性必须在border的属性值不为0的状态下!

above                   只要显现出表格的上边线

below                   只显现出表格的下边线

hsides                   只显示表格的上下边线

vsides                   只显现表格的左右边线

lhs                        只显现表格的左边线

rhs                       只显现表格的右边线                                                                         border/box      会显现出表格的所有边线

                     rules                            rows           只显示出横行的格框线

cols                  只显示出直行的格框线

all                    显示全部格框线

groups          表示列组合水平部分

none                         不显示任何格框线

表格的对其方式

（1）表格的对其方式

属性名称                     属性值                说明

align                          left                           表格居左(默认)

center                表格居中

right                  表格居右

（2）单元格内容的对其方式

表格大小、背景颜色、背景图案的设置

属性名称                     属性值                  说明

width                           像素            绝对值,像素表示表格宽度

百分比          相对值,百分比表表格宽度

height                         像素       绝对值,像素表示表格高度

百分比          相对值,百分比表示表格高度

bgcolor                        英文/十六      表格的背景颜色

background           URL         表格的背景图片

合并单元格

属性名称                     属性值                 说明

colspan                     数字                   向两边扩展栏位

rowspan                     数字                   向下扩展栏位

嵌套表格的应用

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架

框架的基本结构

格式：

<frameset>

<frame>

<frame>

<frame>

</frameset>

功能说明:<frameset>用来设置多窗框结构的声明

<frameset>下的属性：

属性名称                     属性值                 说明

cols                          像素                     设置直排的多窗框环境

百分比                 同上

rows                        像素                     设置横排的多窗框环境

百分比                 同上

属性格式：

<frameset  cols=”120,80,120”>

<frameset  cols=”20%,40%,20%”>

<frameset  cols=”40%,*,*”>

<frameset  rows=”120,80,120”>

<frameset  rows=”20%,40%,20%”>

<frameset  rows=”20%,*,*”>

                     <frame>下的属性：

属性名称                        属性值                   说明

src                            URL                     链接的页面

name                        自定义                 框架名称

noresize                    true                      允许浏览器自行改变框架大小

false                            不允许

scrolling                        yes                       不管网页内容的大小，都出现滚动条

no                        不管网页内容的大小，都不现滚动条

auto                     浏览器自动判断，是否需要滚动

marginheight              像素                    设置垂直方向，窗体内容与边界的距离

marginwidth                  像素                     设置水平方向，窗体内容与边界的距离

frameborder               0\1                       不出现框体边/出现窗体边线

属性格式：

<frame  src=”URL”>

<frame  noresize>

框架的嵌套

格式：

<frameset  rows="20%,80%">

<frame  src="URL">

<frameset  cols="20%,80%">

<frame  src="URL">

<frame  src="URL">

</frameset>

</frameset>

注意这里没有（<body>标签）

内联框架

格式:<iframe>…</iframe>

功能: 它是个内联框架，是在页面里生成个内部框架。

属性名称                     属性值                 说明

src                         URL                     链接的页面

height                           像素/%                 绝对/相对  高度

width                            像素/%                 绝对/相对  宽度

scrolling                 yes                       不管网页内容的大小，都出现滚动条

no                        不管网页内容的大小，都不现滚动条

auto                     浏览器自动判断，是否需要滚动条

frameborder            0\1                       不出现框体边/出现窗体边线