html单独给某个单元格设置背景色,html如何将这个表格背景颜色改变

首页 > 实用技巧 > 作者:YD1662023-06-24 11:46:28

在HTML中,我们经常会用到table布局;有时候需要实现指定单元格,当鼠标移动到上面的时候,该单元格背景变色,不是该行背景变色,也不是仅仅文字的背景变色;

html的文件结构大家都是知道的了,总体分为head和body部分

我们要实现变色,在head部分实现格式

<style>

.tablex {border-collapse: collapse;}

.tablex tr {}

.tablex tr td {text-align:center; line-height:30px;}

.tablex tr td:hover { background-color:#f00; color:#fff;}

</style>

然后在body部分,使用table时候,注明class="tablex".这样的话,就实现了我们所说的效果了。

附上完整代码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK" />

<title>测试鼠标移到到表格单元格背景颜色改变的</title>

<style>

.table1 {border-collapse: collapse;}

.table1 tr {}

.table1 tr td {text-align:center; line-height:30px;}

.table1 tr td:hover { background-color:#006030; color:#006030;}

</style>

</head>

<body>

<table class="table1" width="70%" border="1">

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

<tr>

<td>测试</td>

<td>测试</td>

<td>测试</td>

<td>测试</td>

</tr>

</table>

</body>

</html>

在任何一个浏览器中运行,效果如下

html单独给某个单元格设置背景色,html如何将这个表格背景颜色改变(1)

南大盛联20年来一直致力于高端IT培训--打造高级软件人才实战培训专家,学生对我们的认可是我们一直前进的动力;项目团队全球招聘,特聘来自海外的老师进行任教,采用100%商业项目进行实战培训,线上线下同步进行。

课程全部紧随市场需求进行设计,并且动态进行调整;7天免费试听,0首付开始学习,学完后进行100%推荐就业,不满意工作岗位2次推荐。

选定一个平台,认识一群志同道合的朋友,你的未来人生路必定不一样。

目前已经开设下面这些培训项目

Java培训

安卓培训

JavaWeb培训

Linux培训

云服务器布置培训

HTML5培训

SEO培训

视频剪辑培训

UI培训

欢迎您们分享给自己愿意分享的朋友,大家一起来进步;相互转告,咨询,学习。

南大盛联培训理念:我懂,我也能让你懂。

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.