表格

表格元素主要由行，列，表头单元格，正文单元格，标题，表头行，正文行，表尾行构成。
在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

标签

html表格

单元格引用

表格与框架

表格

表格的组成

框架

框架的嵌套

内联框架