HTML——表格与框架

表格

表格的创建

  • 由行和列组成的一种结构。
    创建HTML表格:
    1、表格内容包含在table双标签里。
    2、caption标签定义标题表格。
    3、tr标签定义表格中的一行【table row】
    4、td【table data cell —单元格】标签和th【table header cell—单元格头部】标签定义一个单元格。th标签中内容默认粗体、局中显示。
<table>
    <caption>表格标题</caption>
    <tr>
        <th>1行1列的内容</th>
        <th>1行2列的内容</th></tr>
    <tr>
        <td>2行1列的内容</td>
        <td>2行2列的内容</td></tr></table>

表格的属性

table:
1、border:设置表格最外面边框的宽度。
2、width:设置表格整体的宽度。
3、align:表格相对于其它标签的水平对齐方式,建议使用float。
4、bgcolor:表格整体的背景颜色。
5、cellpadding:设定单元格边界与单元格内容之间的间距(单位:px)。
6、cellspacing:指定单元格之间的间距(单位:px)。
tr、th、td:都具有align(水平对齐方式),bgcolor,valign(垂直对齐方式)

th和td除此之外
4、width和height:单元格的宽度和高度。
5、colspan标签属性和rowspan标签属性:分别设定单元格横跨的列数和横跨的行数。
【横跨行列数是默认从上到下和从左到右,同时需要将后面的单元格删除】
6、nowrap:设定单元格的内容是否换行 。


框架

1、frameset标签

  • 框架集标签,用于规定框架集中有多少个框架窗口或框架集。
    【frameset不能与body同时使用】
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="20%,*,40%">//表示三行,第一行占据20%,第三行占据40%
        <frame src="top.html"/>
        <frameset cols="20%,*">
            <frame src="left.html" />
            <frame src="right.html"/>
        </frameset>
        <frame src="bottom.html" />
    </frameset>
</html>


left.html代表一个框架
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background-color: red;">
    </body>
</html>

2、frame标签

  • 框架标签,单标签,用于在frameset 中定义一个框架窗口
    【每个框架口都有一个名字】,有多个属性。

1、src标签属性:当前frame框架中显示的文档的地址;

2、name标签属性:定义当前frame框架的名称,用于在 JavaScript 中引用元素或者作为链接的目标。

3、noresize标签属性:取消用户调整框架的大小。

4、scrolling标签属性:设定是否在框架中显示滚动条。

5、frameborder标签属性:是否显示框架周围的边框,1表示有边框(默认值),0 表示无边框。


3、noframe标签

  • 当浏览器不支持frameset标签或frame时,浏览器解释执行noframes标签中的html标签。注意:noframes标签必须使用body标签。

4、iframe标签

  • 在页面中嵌入另外一个页面,双标签。
    属性:
    1、src标签属性:指定iframe 中显示的页面url。

    2、width 标签属性:指定iframe 的宽度,可以是像素或%

    3、height标签属性:指定iframe 的高度,可以是像素或%

    4、scrolling标签属性:设定是否在 iframe 中显示滚动条,其值可以是yes、no或auto。

注意:当iframe【一定为双标签】写成单标签时,后面的div无法显示。


a标签与iframe的区别

a标签不显示href指定的页面,它只是一个超链接;
而iframe会在页面中显示src指定的网页。


a标签中的target属性

  • 设定在哪儿打开链接。

1、_blank:在新窗口中打开被链接文档。

2、_self:在当前窗口、frame或iframe中打开被链接文档,默认值。

3、target_name:在指定的窗口中打开被链接文档。

4、_top:清除所有被包含的框架并将文档载入整个浏览器窗口。

5、_parent:在父窗口中打开被链接。即在直接包含它的那个窗口打开。
frame.html

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="20%,*,20%">
        <frame src="top.html"/>
        <frameset cols="20%,*,20%">
            <frame src="left.html" noresize="noresize" frameborder="0"/>
            <frame src="center.html" frameborder="0"/>
            <frame src="right.html" />
        </frameset>
        <frame src="bottom.html" name="bottom"/>
    </frameset>
</html>

top

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background-color: red;">
    </body>
</html>

bottom

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background-color: greenyellow;">
    </body>
</html>

left

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head >
    <body style="background-color: white;">
        <a href="http://www.baidu.com" target="bottom">百度一下</a>
    </body>
</html>

center

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background-color: yellow;">
        <a href="http://www.baidu.com" target="_top">百度一下</a>
    </body>
</html>

right

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background-color: skyblue;">
        <a href="http://www.baidu.com" target="_parent">百度一下</a>
    </body>
</html>
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值