HTML——表格与框架

最新推荐文章于 2024-06-18 18:28:04 发布

奈奈宇宙

最新推荐文章于 2024-06-18 18:28:04 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_42865575/article/details/81433376

版权

- 表格
  - 表格的创建
  - 表格的属性
- 框架

表格

表格的创建

由行和列组成的一种结构。
创建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
评论
HTML——表格与框架

表格：由行和列组成的一种结构。创建HTML表格： 1、表格内容包含在table双标签里。 2、caption标签定义标题表格。 3、tr标签定义表格中的一行【table row】 4、td【table data cell —单元格】标签和th【table header cell—单元格头部】标签定义一个单元格。th标签中内容默认粗体、局中显示。&amp;lt;table&amp;gt; ...
复制链接

扫一扫