表格
表格的创建
- 由行和列组成的一种结构。
创建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>