码迷,mamicode.com
首页 > Web开发 > 详细

HTML培训课程-------Day02(表格和框架)

时间:2017-10-24 21:07:54      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:开始   功能   eset   绝对值   等等   ups   --   布局   边框   

表格

在网页中表格是一种经常使用到得设计结构,就像表格的内容中可以包含任何的数据,如文字、图像、表单、超链接、表格等等,所有在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                       不出现框体边/出现窗体边线

 

 

 

HTML培训课程-------Day02(表格和框架)

标签:开始   功能   eset   绝对值   等等   ups   --   布局   边框   

原文地址:http://www.cnblogs.com/chenyanlong/p/7725445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!