表格
-
表格元素主要由行，列，表头单元格，正文单元格，标题，表头行，正文行，表尾行构成。
-
在HTML中，通过<table>标签创建表格元素
-
表格的基本属性：cellpadding(设置单元格与其内容之间的距离)，cellspacing(设置单元格之间的距离)，width,height…
-
表格的组成
<body> <table> <tr> <th>姓名</th> <th>部门</th> <th>邮箱</th> <th>电话</th> </tr> <tr> <td>张叁</td> <td>市场部</td> <td>zhangs@itshixu.com</td> <td>18966882233</td> </tr> <tr> <td>李斯</td> <td>研发部</td> <td>lis@itshixu.com</td> <td>13688995566</td> </tr> </table> </body>-
行标签<tr> ，它是表格的水平元素，一行有一个或多个单元格
- 属性：
属性 描述 align 设置单元格内容水平对齐方式：left、center、right、justify valign 设置单元格内容垂直对齐方式：top、middle、bottom、baseline bgcolor 设置单元格的背景颜色 bordercolor 设置行内单元格的边框颜色 bordercolordark 设置行内单元格的右下边框颜色，IE支持 bordercolorlight 设置行内单元格的左上边框颜色，IE支持 -
单元格标签：
-
<td> :多用来包含表格中的数据部分。
-
<th>：用来包含表格的标题部分。
-
单元格的属性：
属性 描述 align 设置单元格内容的水平对齐方式：left、center、right、justify valign 设置单元格内容的垂直对齐方式：top、middle、bottom、baseline rowspan 设置单元格跨越的行数 colspan 设置单元格跨越的列数 scope 定义将表头数据与单元数据相关联的方法 width 设置单元格的宽度 height 设置单元格的高度 bgcolor 设置单元格的背景颜色 -
大部分浏览器都会忽略空白单元格（即<td></td>之间没有内容）；当空白单元格式时，需要在单元格标签内加入一个空白实体引用 以确保浏览器能正确显示该单元格
-
-
-
表格的行分组
-
除了表格(行与列)外，表格还提供了标题，表头，表格主题，表尾部分。
-
使用<thead> <tfoot> <tbody> <caption>标签可以对表格进行横向分组：
- <thead>标签定义表头，用于创建表头的头部信息
- <tfoot>标签定义表尾，用于创建表格的脚注部分
- <tbody>标签定义表格主题，用于表示表格的主体部分
- <caption>标签定义表格标题，显示在整体表格的上方
-
表格可以包含多个<tbody>标签，用于对表格的主体部分的数据进行横向分组；而<thead>和<tfoot>只能出现一次
<table width="400" border="1" rules="group"> <caption> 企业员工薪水绩效表 </caption> <thead> <tr> <th>员工编号</th><th>员工岗位</th> <th>基本工资</th><th>本月绩效</th> </tr> </thead> <tbody>...</tbody> <tbody>...</tbody> <tbody>...</tbody> <tfood>...</tfoot> </table> -
-
表格的列分组
-
在HTML中提供了<colgroup>标签，该标签可以将表格按列进行分组
<colgroup> <col span="3" style="background-color:red;" align="right"/> <col style="background-color:blue;" align="left"/> </colgroup>span元素表示应该横跨的列数，默认值为1.
浏览器对于align与valign属性支持不是很好，建议通过CSS央视实现。<colgroup>标签没有内部内容，所有写成单表签或双标签都可以。
-
-
表格的嵌套
在嵌套表格时，内部表格<table>应该位于外层表格的<td></td>标签之间。表格虽然允许多重嵌套，但在页面设计时，当嵌套层次太多时不利于搜索引擎对页面内容的检索；因此，表格嵌套的层次不能过深，一般不要超过3~4层。
框架
框架集(frameset)主要负责整个页面的布局，属性包括行，列，边框，边框颜色，空白距离等属性
属性 描述 rows 设置框架集中包含的行数，行高度所占窗口的像素或比列 cols 设置框架中包含的列数，列宽度所占窗口的像素或比列 frameborder 设置框架集的边框是否显示，取值为0，1或yes，no，边框本身不能调整宽度 bordercolor 设置边框集的边框颜色 framespacing 框架与框架间的空白距离 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>框架集的属性</title> </head> <frameset rows="60,*,70" frameborder="yes" framespacing="8" bordercolor="#0033FF"> <frame src="topFrame.html" /> <frame src="mainFrame.html" /> <frame src="bottomFrame.html" /> </frameset> <noframes> <body> 该浏览器不支持框架集！ </body> </noframes> </html>
<frame src=“url” name=“框架名” …></frame>
| 属性 | 描述 |
|---|---|
| name | 设置框架的名称，在设置超链接时用作框架的标记 |
| src | 设置在框架中显示页面的URL |
| frameborder | 设置框架的边框是否显示，取值为0或1,frameset |
| marginheight | 定义内容与框架的上下边缘高度，默认为1，frame，设置2独立本地页面观察效果，例如f1.html和f2.html |
| marginwidth | 定义内容与框架的左右边缘宽度，默认为1，frame，设置2独立本地页面观察效果，例如f1.html和f2.html |
| scrolling | 设置框架中是否显示滚动条，取值为yes、no和auto，frame |
| noresize | 设置框架不能调整大小,需要设置frameborder=1的时候可测试，frame设置 |
列如：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>框架的属性</title>
</head>
<frameset rows="60,*,70">
<frame src="topFrame.html" scrolling="yes" frameborder="yes"
noresize="noresize" marginheight="40" marginwidth="60"/>
<frame src="mainFrame.html" / >
<frame src="bottomFrame.html" />
</frameset>
<noframes>
<body>
该浏览器不支持框架集！
</body>
</noframes>
</html>
rows和cols属性的四种取值方式：
1.以像素为单位的绝对值
2.卢兰其窗口的百分比
3.行（或列）之间的相对距离
4.混合度量尺度
框架的嵌套
<frameset rows="50,*,50" >
<frameset cols="1*,1*">
<frame name="topFrame1" src="topFrame.html" />
<frame name="topFrame2" src="topFrame.html" />
</frameset>
<frameset cols="100,*,120">
<frame name="leftFrame" src="leftFrame.html" />
<frame name="mainFrame" src="mainFrame.html" / >
<frame name="rightFrame" src="rightFrame.html" />
</frameset>
<frame name="bottomFrame" src="bottomFrame.html" />
</frameset>
内联框架
-
内联框架（又称行内框架），可以出现在页面的任何位置，比框架集更加灵活。
-
内联框架是嵌入到页面中的一个区域，通过**<iframe>标签引入另外一个页面资源，无需标签<frameset>**协助。
<iframe src="url" name=" " width=" " height=" " ...> </iframe>属性 描述 align 设置iframe与周围文本对齐方式，取值可以是left、right、top、middle、bottom frameborder 设置iframe的边框是否显示，取值0或1 marginheight 定义iframe的顶部和底部的边距 marginwidth 定义iframe的左侧和右侧的边距 height 设置iframe的高度 width 设置iframe的宽度 scrolling 设置iframe中是否显示滚动条，取值yes、no、auto src 设置iframe中显示页面的URL name 设置iframe的名称 <a href="goods.html" target="mainFrame">商品列表</a><br/> <a href="contacts2.html" target="mainFrame">通讯录</a><br/> <a href="http://www.itshixun.com" target="mainFrame">青软实训</a><br/> <a href="http://www.itoffer.cn" target="mainFrame">锐聘</a><br/> <a href="http://www.moocollege.cn" target="mainFrame">码客学院</a>
来源：CSDN
作者：FreOO
链接：https://blog.csdn.net/qq_41429521/article/details/104499503