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属性时的默认边框))(设置表格的外部边框的显示方式)
<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>
<td>:数据部分</td>
<th>标题部分,多用于第一行或第一列,内容粗体水平居中显示<th>
注:当<td>之间没有内容时,要加入空白实体引用 ,确保能正常显示该单元格。
属性有
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>
<!--此空间由于前面单元格的colspan而被占--> <td width="90"> </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"> </td>
<!--此空间由于前面单元格的rowspan而被占--> </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">
<!-- rules用分组的更能明显的看出tbody的作用-->
<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"/>
<!-- colgroup标签由于没有内容部分,单标签双标签都可。align和valign属性建议通过CSS样式实现-->
<!-- 第一组占据两列,使用默认样式,第二组由于没有span属性,默认值占一列,通过style属性将背景样式设为灰色--> <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> </td>
<td>
<table width="100" border="1">
<tr>
<td> </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>
再新建content1,content2,content3,在left中写如下代码,利用target指向上边name为content的链接。
<h1>left</h1>
<a href="content1.html" target="content">c1</a>
<a href="content2.html" target="content ">c2</a>
<a href="content3.html" target="content">c3</a>
2.8最后
指路:一、HTML语言基础
https://blog.csdn.net/qq_46007633/article/details/123572103?utm_source=app&app_version=5.2.1&code=app_1562916241&uLinkId=usr1mkqgl919blenhttps://blog.csdn.net/qq_46007633/article/details/123572103?utm_source=app&app_version=5.2.1&code=app_1562916241&uLinkId=usr1mkqgl919blen在专栏里也可以看到。可以点个关注哦,这个专栏会持续更新哒!
立志每天更新!!!
web前端技术——二、表格与框架相关推荐
- 邮储银行web前端技术二面面经
面试流程及形式 面试流程是6对1面试 ,中间坐着的是宣读面试流程以及拿着一个电脑一直在打字的女面试官,其余5位都是男面试官,我以为中间的是hr,后来才知道那位女面试官之所以能坐在中间,是因为他是研发中 ...
- web用css做网页实验报告,web前端技术实验报告实验二
<web前端技术实验报告实验二>由会员分享,可在线阅读,更多相关<web前端技术实验报告实验二(7页珍藏版)>请在装配图网上搜索. 1.Web前端技术实验报告课程名称:Web ...
- web前端技术(二)之动画进阶
web前端技术(二)之动画进阶 目录 web前端技术(二)之动画进阶 前言 一.web前端动画是什么 二.2D转换标签(transforms) 1. translate() 2.rotate() 3. ...
- Web前端技术历经的洗礼和蜕变
随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变.尤其是近几年随着移动终端的发展,越来越多的人开始投身或转行至新领域,这更为当今的IT产业注入了新的活力.尽管Web前端技术诞生至 ...
- Web前端技术 Web学习资料 Web学习路线 Web入门宝典(不断更新中)
(此文档于2019年3月停止再更新,后续更新移步至:https://github.com/liuyuqin1991/polaris) 学习路线 第一章 技术(核心单独列章节) 1.Node Node. ...
- web前端技术练习题
选择题 1.以下哪个不属于Web前端开发的核心技术?( ). A.HTML C.JavaScript B.CSS D.Java 2.关于HTML说法错误的是( ). A.HTML标签的嵌套结构 ...
- 美团点评金融平台Web前端技术体系
背景 随着美团点评金融业务的高速发展,前端研发数量从 2015 年的 1 个人,扩张到了现在横跨北上两地 8 个事业部的将近 150 人.业务新,团队新,前端领域框架技术又层出不穷,各个业务的研发团队 ...
- 怎么更好掌握Web前端技术?JS的跨域是怎么回事?
怎么更好掌握Web前端技术?JS的跨域是怎么回事?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
- 最受欢迎web前端技术总结
Web前端技术发展非常快,主流技术的进步.想想刚毕业那会用asp技术.目前,该网站已经非常少见主流应用. 后来的后来J2EE框架.然后SpringMVC声望,然而,最近的各种js框架广泛传播,Html ...
最新文章
- 【组合数学】生成函数 ( 使用生成函数求解不定方程解个数 )
- 在 Windows 内核上运行 Docker 靠谱吗?专家六问六答帮你解惑!
- enter your credential for http://dev.azure.....Fatal:Authentication failed for ;;
- linux可以生成pdb调试信息吗,Linux通过使用pdb简单调试python计划
- 网页调用摄像头_【WebAR】虚拟现实来到网页——WebXR Device API第二部分
- C#下的Windows服务通用壳程序(二)
- .NET Core 如何判断程序是否在远程桌面(RDP)下运行
- c#自定义事件的使用方法
- python init main_python 模块中的 __init__.py __main__.py
- 关于C++中cin.ignore()的问题
- python open找不到文件的原因_python – logger找不到文件
- 关于sql server 代理(已禁用代理xp)
- win98/win95
- 2015阿里天池大数据竞赛解题源码
- Java 拾遗补阙 ----- 数据类型
- 解决KEIL MDK编译生成Bin文件时,却生成了*bin文件夹
- 2014淘宝钻石展位新客户考试
- 安卓Android校园综合服务系统校园帮app
- css 中英文换行的相关写法
- 智慧能源发展方向、应用趋势
热门文章
- 男子不执行法院判决被强行腾房(组图)
- 秋季养肺润燥的食物有哪些?
- Android8.1_ADB调整安卓旋转屏的方向
- 夜天之书 #43 The Apache Community
- 夏天就要到了,一起找个游泳池清凉一夏
- 南邮nctf-sql injection 3(宽字节注入) 手注+sqlmap
- matlab 固有频率 振型,基于Matlab 的发动机悬置系统的固有频率和主振型计算
- 如何成为福建省政府采购网供应商?
- 交互式推荐在美团的实现
- 搜索“无聊”的人激增3倍,自我隔离的网民有多空虚