整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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>
在任何一个浏览器中运行，效果如下
南大盛联20年来一直致力于高端IT培训--打造高级软件人才实战培训专家，学生对我们的认可是我们一直前进的动力；项目团队全球招聘，特聘来自海外的老师进行任教，采用100%商业项目进行实战培训，线上线下同步进行。
课程全部紧随市场需求进行设计，并且动态进行调整；7天免费试听，0首付开始学习，学完后进行100%推荐就业，不满意工作岗位2次推荐。
选定一个平台，认识一群志同道合的朋友，你的未来人生路必定不一样。
目前已经开设下面这些培训项目
Java培训
安卓培训
JavaWeb培训
Linux培训
云服务器布置培训
HTML5培训
SEO培训
视频剪辑培训
UI培训
欢迎您们分享给自己愿意分享的朋友，大家一起来进步；相互转告，咨询，学习。
南大盛联培训理念：我懂，我也能让你懂。
格语法:
注意：颜色使用格式有三种：rgb(x,x,x) #xxxxxx colorname
<table width=""></table>指定表格的宽度大小(使用数字pixel或%)
<table border=""></table>设定表格边框大小(使用数字pixel)
<table align=""></table>表格位置,置左,为默认值
align属性:left(左对齐表格，默认值)、right(右对齐表格)、center(居中对齐表格)
<table bgcolor=""></table>设定表格的背景颜色
<table cellpadding=""></table>指定内容与网格线之间的间距(使用数字pixel或%)
<table cellspacing=""></table>指定网格线与网格线之间的距离(使用数字pixel或%)
<table border="1" cellspacing="0" cellpadding="0">
通常表格, 这两个参数都设置为 0 。
<table rules="rows"></table>规定内侧边框的哪个部分是可见的。(兼容性差)
rules属性:none 没有线条。
groups 位于行组和列组之间的线条。
rows 位于行之间的线条。
cols 位于列之间的线条。
all 位于行和列之间的线条。
<table summary="Monthly savings for the Flintstones family"></table>
定义了表格内容的摘要：
表格结构：
在使用表格进行布局时, 可以将表格划分为头部、主体和页脚, 具体如下所示：
<thead></thead>：用于定义表格的头部, 必须位于<table></table>标记中, 一般包含网页的logo和导航等头部信息。
<tfoot></tfoot>：用于定义表格的页脚, 位于<table></table>标记中<thead></thead>标记之后, 一般包含网页底部的企业信息等。
<tbody></tbody>：用于定义表格的主体, 位于<table></table>标记中<tfoot></tfoot>标记之后, 一般包含网页中除头部和底部之外的其他内容。
注意：在没有<tbody></tbody>比较的情况下, 浏览器会自动添加<tbody></tbody>标记。
<table bordercolor=""></table>设定表格边框的颜色
<table cols=""></table>指定表格的栏数
<table height=""></table>指定表格的高度大小(使用数字)
<table background=""></table>背景图片的URL=就是路径网址(默认是repeat：水平和垂直方向重复)
<table bordercolordark=""></table>设定表格暗边框的颜色
<table bordercolorlight=""></table>设定表格亮边框的颜色
<tr align=""></tr> 定义表格行的内容对齐方式。
align属性值:right、left、center、justify、char
<tr bgcolor=""></tr> 规定表格行的背景颜色。
<tr valign=""></tr> 规定表格行中内容的垂直对齐方式。
valign属性值right、left、center、justify、char
<td colspan=""></td>指定储存格合并栏的栏数(使用数字)
<td rowspan=""></td>指定储存格合并列的列数(使用数字)
<td align=""></td> 调整表格字段之左右对齐
<td bgcolor=""></td> 设定表格字段之背景颜色
<td colspan="" rowspan=""></td> 表格字段的合并
<td valign=""></td> 调整表格字段之上下对齐
<td width=""></td> 调整表格字段宽度
<td nowrap="nowrap"></td> 规定表格单元格中的内容不换行(注意只有一个值:nowrap)
<caption></caption>为表格加上标题
<caption align="">设定表格标题位置
align属性:left, center(默认值), right
<th></th> 定义表头(粗体居中)
细表格边框
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>表格创建后浏览器会自动添加<tbody>标签
tml代码里，表示颜色一般用两种方法，一种是直接写出颜色的英文，另一种是前面写个“#”后面再写6个数字字母。
先说第一种表示方法，这个很简单，如果要表示黑色直接就是black，红色就red，蓝色就blue。具体的我们看下面图1，图2
图1
图2
现在来说第二种，这也是我们这个文章要重点说的，因为这个也是最经常用的表示方法，很多人看到这个又是字数又是字母的就糊涂了，今天我们来详细的把它讲清楚。先用图片来说明一下，先看下面图3
图3
图3里的#000000表示的是黑色，#ff0000表示红色，#00ff00表示绿色，所以说这个效果是和图1一样的。那要怎么理解这种表示颜色的方法呢，我们再来列出几个颜色和它的表示法：
红色：#ff0000，绿色：#00ff00，蓝色：#0000ff， 大家仔细看一下就可发现，这个和我们平常说的RGB格式来表示颜色是一样的，相当于红绿蓝三个光，而f是十六进制中的0,1,2,.....e,f中的f了 。f是里面的最大值了，ff代表该颜色光的值达到最大，所以#ff0000是红色，#880000表示的也是红色，只是没有#ff0000这个那么红了。其他的也是同理。所以#000000代表三个颜色光的值都为0，没有任何光了，那就是黑色了，相反#ffffff代表三个颜色光的值都达到最大，混合在一起就成白色。我们也知道红光和蓝光混在一起是紫色的，所以#ff00ff表示的是紫色，同样#ffff00表示的是黄色。讲到这里相信大家应该都明白了怎样用这种方法表示颜色了吧，如果要表示一种颜色，只要把相应的值增加或减小或者添加另一个颜色，这样就可以得到千千万万种颜色了。
这两种表示颜色的方法都讲完了，尤其是第二种方法，大部分情况都是用这种方法来表示html里面的颜色的。如果大家有什么更好的更容易理解的想法，可以点击关注【点点有你】一起来讨论一下哦
最后，如果您觉得我写的这些文章对您有帮助的话，您可以根据您的情况随意给点赏金，我相信一分也是爱也是支持，下面两图是我的支付宝和微信收款码。当然写文章不是一定要让您给赏金的，有您的支持和赞助，我会有更多动力来写文章和大家分享的，再次感谢您的支持和理解！
*请认真填写需求信息，我们会在24小时内与您取得联系。
