HTML表格标签，利用css设置当鼠标在表格中某行悬停时背景颜色变成浅灰色。

最新推荐文章于 2024-08-07 04:14:46 发布
最新推荐文章于 2024-08-07 04:14:46 发布
阅读量5.2k 收藏 15
点赞数 8
分类专栏： html 文章标签： Html 表格 table tr th td input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LL__Sunny/article/details/103348389
版权

HTML表格标签做一张表格

表格样式如下

在这里插入图片描述

😊😊 标题具体代码如下（实现思路在代码下面）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
    <style>
       table{
			padding-top:10px;
			margin-left: 20%;
			margin-right: 10%;
			text-align: left;
			font-size: 18px;
          	
       }

       td{  

			border: 0.3px solid 	#D0D0D0;
			
		}

       th{
       	  font-family: 楷体;
       	  font-size: 19px;
       	  border: 0.3px solid 	#D0D0D0;			
       	  color: blue;
       	  text-align: center;
       	  background: #ccffcc;
       }
		
		tr:hover{
           background: #F0F0F0;

		}	
		form input{width:75px;
                   height: 30px;
                   border-radius: 8%;
                   border:0.1px solid #D0D0D0;
                   background: none;
		          }  
	</style>




</head>
<body>
	
	<table cellspacing="0px" cellpadding="10px" >
           <tr >
           	<th>序号</th>
           	<th>学校名称</th>
           	<th>类别</th>
           	<th>个人赛报名表</th>
           	<th>个人赛报状态</th>
           	<th>团队赛报名表</th>
           	<th>团队赛状态</th>
           	<th>院校编辑/联系人设置</th>
           </tr>
           <!--  <button name="编辑">编辑</button><button name="delete">删除</button>
 -->
             <tr >
             	<td>1</td>
             	<td>中国矿业大学</td>
             	<td>本科</td>
             	<td>院校未上传</td>
             	<td>组委会未审核</td>
             	<td>院校未上传</td>
             	<td>组委会未审核</td>
             	
             	<td >
                <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                </form>
                 </td>

             </tr>

              <tr >
              	<td>2</td>
              	<td>中国矿业大学徐海学院</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                      <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                      </form>
              	</td>
              </tr>

              <tr >
              	<td>3</td>
              	<td>徐州医科大学</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                  <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                   </form>
              	</td>
              </tr>

              <tr >
              	<td>4</td>
              	<td>徐州工程学院</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                   <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                   </form>          
              	</td>
              </tr>

              <tr >
              	<td>5</td>
              	<td>江苏师范大学</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                     <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                   </form>
              	</td>
              </tr>

              <tr>
              	<td>6</td>
              	<td>江苏师范大学科文学院</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                  <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                   </form>
              	</td>
              </tr>

              <tr>
              	<td>7</td>
              	<td>九州职业技术学院（民）</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                    <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                   </form>
              	</td>
              </tr>

              <tr >
              	<td>8</td>
              	<td>徐州工业职业技术学院</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                     <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                    </form>
              	</td>
              </tr>

              <tr >
              	<td>9</td>
              	<td>徐州幼儿师范高等专科学院</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                     <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                     </form>
              	</td>
              </tr>

              <tr >
              	<td>10</td>
              	<td>徐州生物工程职业技术学院</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                    <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                    </form>
              	</td>
              </tr>


              <tr >
              	<td>11</td>
              	<td>徐州生物高等职业学校</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                   <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                   </form>
              	</td>
              </tr>


              <tr >
              	<td>12</td>
              	<td>徐州经贸高等职业学校</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                     <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                    </form>
              	</td>
              </tr>


              <tr >
              	<td>13</td>
              	<td>江苏建筑职业技术学院</td>
              	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                   <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                   </form>
              	</td>
              </tr>


              <tr >
              	<td>14</td>
              	<td>江苏徐州医药高等职业学院</td>
             	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                      <form action="#">
                      <input type="text"  placeholder="✏编辑" width="60px">                     
                      <input type="reset" value="❌删除">
                      </form>
              	</td>
              </tr>

              <tr >
              	<td>15</td>
              	<td>江苏徐州机电高等职业学院</td>
             	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                   <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                   </form>
              	</td>
              </tr>

              <tr >
              	<td>16</td>
              	<td>江苏徐州财经高等职业学院</td>
             	<td>本科</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>
              	<td>院校未上传</td>
              	<td>组委会未审核</td>             	
              	<td>
                   <form action="#">
                     <input type="text"  placeholder="✏编辑" width="60px">                     
                     <input type="reset" value="❌删除">
                   </form>s
              	</td>
              </tr>
	</table>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可协议进行许可。</a>
	
</body>
</html>

🎈🎈🎈总体布局思路如下：

1.通过table常见一个表格；
2.在table内通过和为表格添加具体内容；
3.通过css样式在title内添加style标签；
4.通过table{},td{},th{},添加相关属性控制表格外观；cellpadding属性与cellspacing直接在body内的table
5.表格最后一列的编辑于删除按钮的实现，是在内部添加form表单即来添加编辑于删除的功能按钮。

ヾ(≧▽≦*)o希望对您有所帮助哟！

LL__Sunny
关注
专栏目录
html鼠标悬停填充表格,鼠标移到表格上时，鼠标所在行放大高亮显示【实例】...
weixin_29614359的博客
06-03 1501
本文给大家介绍一个比较有趣的CSS Table表格，当鼠标移到表格上时，鼠标所在行放大高亮显示。鼠标所在行放大高亮显示HTML代码html>TableV01*{margin:0px;padding:0px;box-sizing:border-box;}body,html{height:100%;font-family:sans-serif;padding-top:30px;...
html单元格点击变色,当我将鼠标悬停在html表格上时，更改单元格的颜色
weixin_29327977的博客
06-24 2035
我已经查看了所有发布的答案，但似乎无法让此代码正常工作。当我将鼠标悬停在单个单元格上时，我试图让单个单元格改变颜色，但我无法使用我们正在使用的服务访问.css。我被迫放弃一个HTML代码框，可以将我的代码粘贴到特定于我正在更改的元素中，但不是整个.css文件...只是该元素。当我将鼠标悬停在html表格上时，更改单元格的颜色这是我的代码。我非常感谢任何帮助将背景更改为＃ff0000，将文本更改为＃...
CSS之设置页面背景色为浅灰色
最新发布
weixin_40327704的博客
08-07 193
CSS设置页面背景色为浅灰色，代码示例如下：登录后复制 .list { background: #ebedf0; height: 100vh; overflow-y: scroll; overflow-x: hidden; }1.2.3.4.5.6.即可。 ...
简洁浅灰色css网站模板
12-01
简洁浅灰色css网站模板
html鼠标悬停多个图片变灰,怎样用CSS让鼠标悬停在图片上图片变灰
weixin_39728213的博客
06-03 1700
我们常常在网页中看到这样一种效果，当你的鼠标移动到图片上的时候，图片变灰，或者变暗，这实际是图片被CSS设置为半透明样式。下面就给大家做一个实例看一下这种效果怎么实现a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}此CSS代码作用，设置鼠标移动到A超链接时，超链接内图片(img)呈现半透明显示80%效果。解释：...
CSS实现网页灰色调
qq_39163732的博客
04-04 2365
前沿 每当国家重大灾难纪念日，如南京大屠杀纪念日、最近的4月4号的为抗议牺牲者哀悼等，网页都会设置为灰色调，实现网页灰色调非常简单，只需要CSS在HTML标签设置属性即可。 设置灰色调 html{ filter: grayscale(100%); /* -webkit-filter: grayscale(100%); */ -moz-filter: graysca...
css实现鼠标移入背景图片变灰并浮现文字的效果
AzeShinja的博客
11-27 1010
实现鼠标移入浮现文字的效果
layui的表格table选中数据后更改本行的颜色
10-17
在实际应用中，我们经常需要根据用户的选择状态来改变表格的视觉效果，比如选中某行后改变其颜色，以突出显示。下面将详细介绍如何在layui的表格中实现这一功能，并涉及到相关的JavaScript和CSS知识。 首先，layui...
使用CSS的GridView行的悬停效果
04-08
这段代码的意思是，当鼠标指针悬停在GridView的表格行上时，行的背景颜色变为#F5F5F5，文字颜色变为#333。当然，你可以根据自己的需求调整颜色值。 在ASP.NET环境中，GridView控件通常会自动生成HTML代码，因此我们...
css美化表格，实际中效果
12-17
}`将在鼠标悬停时改变行的背景色。 6. **条纹效果**：为奇数行或偶数行设置不同的背景色，可以创建条纹效果，提高可读性。例如，使用`nth-child`伪类：`tr:nth-child(even) { background-color: #f2f2f2; }`将为...
css样式的灰色格调的按钮布局
05-23
不错的灰色样式的按钮
Bootstrap CSS(图片，表格，文字排版，颜色)
weixin_45921263的博客
07-11 1087
文章目录前言一、偏移列（补充）1.概念：2.代码示例：二、图片1.``类：2.代码如下（示例）：三、文字排版1.代码如下（示例）：四、表格1.表格类，`和类`2.代码如下（示例）：五、颜色1.代码如下（示例）： 前言 本篇文章主要是对Bootstrap CSS进行相应的总结，其中常用的就是图片、表格、文字排版、颜色等一些内容。同时对上篇文章缺失的的内容（偏移列）进行补充。 一、偏移列（补充） 1.概念： 偏移是一个用于更专业的布局的有用功能。它们可以用来给列腾出更多的空间。为了在大屏幕显示器上使用偏移，
HTML使表格框的颜色为背景颜色 [大三TJB_708]
热门推荐
记一忘三二
09-29 1万+
1.使表格框显示为背景颜色就是说表格框没有被设置的颜色填充，而仅仅是表格框被染上了背景颜色。 代码如下： C语言指导对象 ............. 得到一下效果 2.代码解释 表示创建表格 ，表格框的大小为1 ，背景颜色为00BB00 ，表格居中，宽度为整个网页的30%，高度为整个网页的20% 然后一行
整体HTML页面变成灰色
DHLSP15的博客
12-01 435
整体HTML页面变成灰色。
CSS让整个网站变成灰色的做法
fntcw的博客
12-11 562
CSS让整个网站变成灰色的做法 方法一：直接在css样式文件里加上这段代码 html{-webkit-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} &lt;!–可以是整个网站变成灰色的–&gt; 方法二：可以直接插入到网页/模板文件里 html{fi...
html 页面设置为灰色样式
suxuelian的博客
12-01 2086
一开始在网上搜索以及和后端同事沟通解决方案，得到一些答案，设置一个灰色的蒙层，但这样做存在弊端，设置蒙层后，页面上的按钮以及超链接a标签，都无法进行操作。相信各位网站开发者，都会遇到在一些特殊时期，需要将网站设置特殊颜色，本次介绍的是，如何将网站整站页面设置为灰色。和前端同事沟通后，得到最佳解决结果，仅需要设置全局样式即可。使用以上代码即可实现将网站设置为灰色。
CSS网页变灰色代码方法分享
winkexin的博客
06-11 1671
发生重大哀悼事件时候，很多网站都将网站变灰色以示哀悼。在此我给大家总结了两种CSS网页变灰色代码方法，分享给大家。
html鼠标悬停改变背景,html - 更改鼠标悬停行的背景颜色 - SO中文参考 - www.soinside.com...
weixin_33708633的博客
06-03 1092
一旦我们鼠标悬停在“货币”上，我们可以看到如下所示：我需要的是，一旦我们鼠标悬停在特定货币[行]上，它应该显示不同的背景颜色，如下所示。.menuBackground {background: brown;text-align: center;}.dropDownMenu a {color: #FFF;}.dropDownMenu,.dropDownMenu ul {list-style: non...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值