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

百科大全

更新时间：2025-10-05 09:05:4350

admin管理员组
文章数量:1794759

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

注：本系列其他章节在最后有链接哦 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属性时的默认边框））（设置表格的外部边框的显示方式）

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：设置单元格的右下边框颜色

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层

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 大概下面这个样子，为了看得方便。其中先上中下框架，又在中间嵌套了一个左右结构的框架。

内联框架

内联框架的属性

示例：在两个的中间

框架之间的连接

使用框架布局页面通常放置导航栏，点击链接，跳转目标页面，每个<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>

再新建content1，content2，content3，在left中写如下代码，利用target指向上边name为content的链接。

2.8最后

指路：一、HTML语言基础

blog.csdn/qq_46007633/article/details/123572103?utm_source=app&app_version=5.2.1&code=app_1562916241&uLinkId=usr1mkqgl919blenblog.csdn/qq_46007633/article/details/123572103?utm_source=app&app_version=5.2.1&code=app_1562916241&uLinkId=usr1mkqgl919blen在专栏里也可以看到。可以点个关注哦，这个专栏会持续更新哒！

立志每天更新！！！

本文标签：表格框架技术 web

版权声明：本文标题：web前端技术——二、表格与框架内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686986958a125746.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。