第三章 表格和框架

一、 框架

1、表格的作用:显示数据和图文布局

2、表格-行-列
<table>
<tr>
<td>第一行第1列</td>
<td>第一行第2列</td>
</tr>
<tr>
<td>第二行第一列</td>
……
</tr>
</table>

3、跨行和跨列——<td>标签的属性
跨行-rowspan,指的是单元格占据了多少行.
跨列-colspan,指的是单元格占据了几列。

4、报表格式的表格
(1)<table>-<caption>:表格标题
(2)<tr>-<th>:表格头,有居中加粗效果,不与<td>一同使用。
(3)用于逻辑分块的表格标签,在<table>下,可以包住多个<tr>
<thead>……</thead> :表格页眉
<tbody>……</tbody> :表格主体
<tfoot>……</tfoot> :表格页脚

5、使用表格布局
用于数据展示和表格表单布局,具有局限性。要求数据整齐,布局时表格还可以嵌套书写,难度较大,比较复杂。因此很少使用。流行使用DIV+CSS布局。

6、表格实现图文布局的步骤
(1)确定基本表(几行几列的表格)
(2)确定跨行跨列,使用colspan和rowspan属性
(3)删除多余单元格

二、 框架
1、框架的作用
(1)实现多窗口页面——框架集<frameset>
(2)实现页面复用 ——内嵌框架<iframe>

2、框架集【示例为一个两行三列的框架】
<frameset cols="15%,50%,*" rows="50%,*">
<frame src="子页面" />
……
</frameset>
<noframes>
<body>框架集不能显示时才显示body的内容</body>
</noframes>

注:
<body>和<frameset>不能同时使用,为了兼容性可以使用<noframe>标签
使用框架集编写多个页面的步骤是:先写子页面,再写主页面。(建议将子页面放在同一文件夹中,避免页面混乱)

3、经典的两行2列框架集

<!--首先将页面分割成两行-->
<frameset rows="20%,*">
<frame src="subframe/head.html"/>

<!--再将第二行看做一个两列的框架集-->
<frameset cols="200,*">
<frame src="subframe/left.html"/>
<frame src="subframe/right.html"/>
</frameset>

</frameset>

4、内嵌框架——src 框架加载的内容路径 frameborder 框架的边框

内联:例子 <div><iframe src="加载内容的路径" frameborder="1"></iframe></div> 
外部链接 本地图片 网页都可以

优点 :

a 导入第三方内容 加载速度较快速
b 安全性强
c 加载脚本

缺点 :

a iframe会阻塞主页面的Onload事件
b. 即时内容为空,加载也需要时间
c. 没有语意

<body>
<iframe src="内嵌页面的路径" />
</body>

注:内嵌框架不仅可以连站内页面,还可以外联站外页面(如:https://www.baidu.com)。 

原文地址:https://www.cnblogs.com/suola/p/8275754.html