web前端技术——二、表格与框架

最新推荐文章于 2024-05-11 14:22:31 发布

ice三分颜色

最新推荐文章于 2024-05-11 14:22:31 发布

阅读量3.8k

点赞数 2

分类专栏： web前端技术文章标签： html5 html 前端 web

本文链接：https://blog.csdn.net/qq_46007633/article/details/123623344

版权

web前端技术专栏收录该内容

11 篇文章 4 订阅

订阅专栏

注：本系列其他章节在最后有链接哦

2.1基本元素

表格可实现页面或局部页面的排版布局。表格元素主要有行列表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成。

单元格是表格的基本元素，<tb>表示

行是水平元素，<tr>表示

2.2表格<table>属性:

<table>标签创建元素，默认情况下表格边框隐藏

包含align、bgcolor、border、cellpadding、cellspacing、height 、width、rules、frame

Align：left、center、right （设置表格相对周围元素对齐方式）

Bgcolor：rgb(x,x,x)、#xxxxxx、colorName（设置表格背景颜色）

Border：像素（设置表格边框宽度）

Cellpadding：像素或百分比（设置单元格与其内容之间的距离）

Cellspacing：像素或百分比（设置单元格之间的距离）

Height：像素或百分比（设置表格的高度）

Width：像素或百分比（设置表格的宽度）

Rules：none（不显示）、groups（显示分组）、rows（显示行）、cols（显示列）、all（行和列都显示）（设置表格内的表格线表示方式，默认是all）

Frame：void（不显示边框）、above（只显示顶部边框）、below（只显示底部边框）、hsides（显示顶部和底部边框）、vsides（只显示左右两侧边框）、lhs（只显示左侧边框）、rhs(只显示右侧边框)、box或border（显示表格的所有边框（不指定frame属性时的默认边框））（设置表格的外部边框的显示方式）

<table border="1px" cellpadding="5" cellspacing="5" bgcolor="white" align="right" width="400" height="100" >
    <tr >
        <th>姓名</th>
        <th>部门</th>
        <th>邮箱</th>
        <th>电话</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>市场部</td>
        <td>1111111@qq.com</td>
        <td>12345678931</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>研发部</td>
        <td>148284352@qq.com</td>
        <td>14725873698</td>
    </tr>
</table>

2.3单元格标签

单元格是表格的基本元素，包含<td><th>

<th>标题部分，多用于第一行或第一列，内容粗体水平居中显示<th>

注：当<td>之间没有内容时，要加入空白实体引用&nbsp,确保能正常显示该单元格。

属性有

align、valign、rowspan、colspan、scope、width、height 、bgcolor

align：设置单元格内容的水平对齐方式（left、center、right、justify）

valign：设置单元格内容的垂直对齐方式：top、middle、bottom、baseline

rowspan：设置单元格跨越的行数。垂直跨度是单元格在垂直方向上所跨的行数。

colspan：设置单元格跨越的列数，水平跨度，是指表格内的某个单元格在水平方向上跨越的单元格的列数

scope：定义将表头数据与单元数据相关联的方法，

width：设置单元格的宽度

height ：设置单元格的高度

bgcolor：设置单元格的背景颜色

<table width="300" border="1">
    <tr>
        <td colspan="2">单元格占两列</td>
        
        <td width="90">&nbsp</td>
    </tr>
    <tr >
        <td agign="left" > 水平向左对齐</td>
        <td height="30"> 水平向左对齐</td>
        <td rowspan="2" >单元格占两行</td>
    </tr>
    <tr>
        <td height="90" bgcolor="yellow">黄色背景</td>
        <td valign="top">&nbsp</td>
        
    </tr>
</table>

2.4行标签<tr>

行标签是表格的水平元素，一行可包含一个或多个单元格

<td>和<th>在<tr></tr>之间

,<tr>的属性

Align:设置单元格的水平对齐方式（left、center、right、justify）

Valign:设置单元格内容垂直对齐方式（top、middle、bottom、baseline）

Bgcolor:设置单元格的背景颜色

Bordercolor：设置单元格的边框颜色

Bordercolordark：设置单元格的左上边框颜色

Bordercolorlight：设置单元格的右下边框颜色

<table width="400" border="2">
    <tr align="right" bgcolor="white" bordercolor="#FF0000"
    bordercolordark="#003399" bordercolorlight="#000099">
        <td>影片介绍</td>
        <td>影片图片</td>
        <td>上映时间</td>
    </tr>
</table>

2.5表格的分组

表格除了表格主体外还提供了题目、表头和表尾部分。

横向分组：

<thead>标签定义表头，用于创建表头信息，表格中只能出现一次。

<tfoot>：标签定义表尾，用于创建表格的脚注部分，表格中只能出现一次。

<tbody>：标签定义主体，用于表示表格的主体部分

<captipon>:定义表格标题，显示在整个表格的上方

<body>
<table border="1px" width="400" rules="groups">

<caption>
企业员工薪水绩效表
</caption>
<thead>
<tr>
<th>员工编号</th><th>员工岗位</th>
<th>基本工资</th><th>本月绩效</th>
</tr>
</thead>
<tbody>
<tr>
<td>YF0016</td><td>java高级工程师</td>
<td>6000</td><td>3000</td>
</tr>
<tr>
<td>YF0017</td><td>java高级工程师</td>
<td>6000</td><td>3000</td>
</tr>
</tbody>
<tbody>
<tr>
<td>YF0021</td><td>测试人员</td>
<td>3000</td><td>2000</td>
</tr>
<tr>
<td>YF0026</td><td>web前端设计师</td>
<td>5500</td><td>2200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2022年制作</td></tr>
</tfoot>
</table>
</body>

表的纵向分组又称列分组

<colgroup>标签属性

Align:设置单元内容水平对齐方式：left、center、right、justify

Valign:设置单元格垂直对齐方式：top、middle、bottom、baseline

Span:规定该列应该横跨的列数，默认值是1

Width:设置列组合的宽度

<table width="400" border="1">
<colgroup span="2" align="left" valign="bottom"/>
<colgroup style="background-color: #CCC"/>


<tr height="60" >
    <th>员工编号</th>
    <th>员工岗位</th>
    <th>基本工资</th>
    <th>本月绩效</th>
</tr>
<tr>
    <td>YF0016</td><td>java高级工程师</td>
    <td>6000</td><td>3000</td>
</tr>
<tr>
    <td>YF0016</td><td>java高级工程师</td>
    <td>6000</td><td>3000</td>
</tr>
</table>

2.6表的嵌套

嵌套不要超过3层

<t able width="100" border="1">
<tr>
    <td>&nbsp</td>
    <td>
      <table width="100" border="1">
        <tr>
          <td>&nbsp</td>
        </tr>
      </table>
    </td>
</tr>
</table>

2.7表格的框架

框架将浏览器窗口划分为多个独立窗格独立的HTML页面。

框架集标签<frameset>划分页面的框架，使用属性rows（或cols）说明框架的行数（或列数）以及所占窗口的比例

框架集属性：

Rows和cols属性的四种取值形式

以像素为单位取值（60,*,70），浏览器窗口百分比，行或列之间相对宽度，混合度量尺寸

<frame>标签用于指示框架集中的每个框架的内容，单双标签都可以。

<frame/>标签的两个常用属性：

Src：用于指向一个页面的路径

Name:为框架制定一个名称

所有属性：

<frameset rows="200,*,300" frameborder="2" >
    <frame src="top.html" noresize="noresize" marginheight="40" marginwidth="60">
    <frameset cols="500,*" frameborder="1" bordercolor="red" >
        <frame src="left.html" name="leftframe">
        <frame src="right.html">
    </frameset>
    <frame src="bottom.html">
    <noframes>
        <body>该浏览器不支持框架集</body>
    </noframes>
</frameset>

先创建了几个文件，里面简单写上top left right bottom 大概下面这个样子，为了看得方便。其中先上中下框架，又在中间嵌套了一个左右结构的框架。

内联框架

内联框架的属性

示例：在两个的中间

<div>随便写点</div>
<iframe name="myFrame" src="top.html" frameborder="1"
width="420" height="240"scrolling="1" align="right"></iframe>
<div>随便写点</div>

框架之间的连接

使用框架布局页面通常放置导航栏，点击链接，跳转目标页面，每个<frame>都有一个name属性为框架分别制定一个名称，点击链接会根据target属性所指定的框架中加载目标页面内容。

在之前写的框架中给右侧的加上name="content

<frameset rows="200,*,300" frameborder="2" scrolling="1">
    <frame src="top.html" noresize="noresize" marginheight="40" marginwidth="60">
    <frameset cols="500,*" frameborder="1" bordercolor="red" >
        <frame src="left.html" name="leftframe">
        <frame src="right.html" name="content">
    </frameset>
    <frame src="botton.html" >
    <noframes>
        <body>该浏览器不支持框架集</body>
    </noframes>