HTML中實現(xiàn)鼠標(biāo)移動到table中某個單元格中顏色改變

html中，我們經(jīng)常會用到table布局；有時候需要實現(xiàn)指定單元格，當(dāng)鼠標(biāo)移動到上面的時候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

html的文件結(jié)構(gòu)大家都是知道的了，總體分為head和body部分

我們要實現(xiàn)變色，在head部分實現(xiàn)格式

<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".這樣的話，就實現(xiàn)了我們所說的效果了。

附上完整代碼：

<html>

<head>

<title>測試鼠標(biāo)移到到表格單元格背景顏色改變的</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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

在任何一個瀏覽器中運行，效果如下

南大盛聯(lián)20年來一直致力于高端IT培訓(xùn)--打造高級軟件人才實戰(zhàn)培訓(xùn)專家，學(xué)生對我們的認(rèn)可是我們一直前進(jìn)的動力；項目團(tuán)隊全球招聘，特聘來自海外的老師進(jìn)行任教，采用100%商業(yè)項目進(jìn)行實戰(zhàn)培訓(xùn)，線上線下同步進(jìn)行。

課程全部緊隨市場需求進(jìn)行設(shè)計，并且動態(tài)進(jìn)行調(diào)整；7天免費試聽，0首付開始學(xué)習(xí)，學(xué)完后進(jìn)行100%推薦就業(yè)，不滿意工作崗位2次推薦。

選定一個平臺，認(rèn)識一群志同道合的朋友，你的未來人生路必定不一樣。

目前已經(jīng)開設(shè)下面這些培訓(xùn)項目

Java培訓(xùn)

安卓培訓(xùn)

JavaWeb培訓(xùn)

Linux培訓(xùn)

云服務(wù)器布置培訓(xùn)

HTML5培訓(xùn)

SEO培訓(xùn)

視頻剪輯培訓(xùn)

UI培訓(xùn)

歡迎您們分享給自己愿意分享的朋友，大家一起來進(jìn)步；相互轉(zhuǎn)告，咨詢，學(xué)習(xí)。

南大盛聯(lián)培訓(xùn)理念：我懂，我也能讓你懂。

格語法:

注意：顏色使用格式有三種：rgb(x,x,x) #xxxxxx colorname

<table width=""></table>指定表格的寬度大小(使用數(shù)字pixel或%)

<table border=""></table>設(shè)定表格邊框大小(使用數(shù)字pixel)

<table align=""></table>表格位置,置左,為默認(rèn)值

align屬性:left(左對齊表格，默認(rèn)值)、right(右對齊表格)、center(居中對齊表格)

<table bgcolor=""></table>設(shè)定表格的背景顏色

<table cellpadding=""></table>指定內(nèi)容與網(wǎng)格線之間的間距(使用數(shù)字pixel或%)

<table cellspacing=""></table>指定網(wǎng)格線與網(wǎng)格線之間的距離(使用數(shù)字pixel或%)

通常表格, 這兩個參數(shù)都設(shè)置為 0 。

<table rules="rows"></table>規(guī)定內(nèi)側(cè)邊框的哪個部分是可見的。(兼容性差)

rules屬性:none 沒有線條。

groups 位于行組和列組之間的線條。

rows 位于行之間的線條。

cols 位于列之間的線條。

all 位于行和列之間的線條。

定義了表格內(nèi)容的摘要：

表格結(jié)構(gòu)：

在使用表格進(jìn)行布局時, 可以將表格劃分為頭部、主體和頁腳, 具體如下所示：

<thead></thead>：用于定義表格的頭部, 必須位于<table></table>標(biāo)記中, 一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息。

<tfoot></tfoot>：用于定義表格的頁腳, 位于<table></table>標(biāo)記中<thead></thead>標(biāo)記之后, 一般包含網(wǎng)頁底部的企業(yè)信息等。

<tbody></tbody>：用于定義表格的主體, 位于<table></table>標(biāo)記中<tfoot></tfoot>標(biāo)記之后, 一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。

注意：在沒有<tbody></tbody>比較的情況下, 瀏覽器會自動添加<tbody></tbody>標(biāo)記。

<table bordercolor=""></table>設(shè)定表格邊框的顏色

<table cols=""></table>指定表格的欄數(shù)

<table height=""></table>指定表格的高度大小(使用數(shù)字)

<table background=""></table>背景圖片的URL=就是路徑網(wǎng)址(默認(rèn)是repeat：水平和垂直方向重復(fù))

<table bordercolordark=""></table>設(shè)定表格暗邊框的顏色

<table bordercolorlight=""></table>設(shè)定表格亮邊框的顏色

<tr align=""></tr> 定義表格行的內(nèi)容對齊方式。

align屬性值:right、left、center、justify、char

<tr bgcolor=""></tr> 規(guī)定表格行的背景顏色。

<tr valign=""></tr> 規(guī)定表格行中內(nèi)容的垂直對齊方式。

valign屬性值right、left、center、justify、char

<td colspan=""></td>指定儲存格合并欄的欄數(shù)(使用數(shù)字)

<td rowspan=""></td>指定儲存格合并列的列數(shù)(使用數(shù)字)

<td align=""></td> 調(diào)整表格字段之左右對齊

<td bgcolor=""></td> 設(shè)定表格字段之背景顏色

<td colspan="" rowspan=""></td> 表格字段的合并

<td valign=""></td> 調(diào)整表格字段之上下對齊

<td width=""></td> 調(diào)整表格字段寬度

<td nowrap="nowrap"></td> 規(guī)定表格單元格中的內(nèi)容不換行(注意只有一個值:nowrap)

<caption></caption>為表格加上標(biāo)題

<caption align="">設(shè)定表格標(biāo)題位置

align屬性:left, center(默認(rèn)值), right

<th></th> 定義表頭(粗體居中)

細(xì)表格邊框

<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>

表格創(chuàng)建后瀏覽器會自動添加<tbody>標(biāo)簽

tml代碼里，表示顏色一般用兩種方法，一種是直接寫出顏色的英文，另一種是前面寫個“#”后面再寫6個數(shù)字字母。

先說第一種表示方法，這個很簡單，如果要表示黑色直接就是black，紅色就red，藍(lán)色就blue。具體的我們看下面圖1，圖2

圖1

圖2

現(xiàn)在來說第二種，這也是我們這個文章要重點說的，因為這個也是最經(jīng)常用的表示方法，很多人看到這個又是字?jǐn)?shù)又是字母的就糊涂了，今天我們來詳細(xì)的把它講清楚。先用圖片來說明一下，先看下面圖3

圖3

圖3里的#000000表示的是黑色，#ff0000表示紅色，#00ff00表示綠色，所以說這個效果是和圖1一樣的。那要怎么理解這種表示顏色的方法呢，我們再來列出幾個顏色和它的表示法：

紅色：#ff0000，綠色：#00ff00，藍(lán)色：#0000ff，大家仔細(xì)看一下就可發(fā)現(xiàn)，這個和我們平常說的RGB格式來表示顏色是一樣的，相當(dāng)于紅綠藍(lán)三個光，而f是十六進(jìn)制中的0,1,2,.....e,f中的f了。f是里面的最大值了，ff代表該顏色光的值達(dá)到最大，所以#ff0000是紅色，#880000表示的也是紅色，只是沒有#ff0000這個那么紅了。其他的也是同理。所以#000000代表三個顏色光的值都為0，沒有任何光了，那就是黑色了，相反#ffffff代表三個顏色光的值都達(dá)到最大，混合在一起就成白色。我們也知道紅光和藍(lán)光混在一起是紫色的，所以#ff00ff表示的是紫色，同樣#ffff00表示的是黃色。講到這里相信大家應(yīng)該都明白了怎樣用這種方法表示顏色了吧，如果要表示一種顏色，只要把相應(yīng)的值增加或減小或者添加另一個顏色，這樣就可以得到千千萬萬種顏色了。

這兩種表示顏色的方法都講完了，尤其是第二種方法，大部分情況都是用這種方法來表示html里面的顏色的。如果大家有什么更好的更容易理解的想法，可以點擊關(guān)注【點點有你】一起來討論一下哦

最后，如果您覺得我寫的這些文章對您有幫助的話，您可以根據(jù)您的情況隨意給點賞金，我相信一分也是愛也是支持，下面兩圖是我的支付寶和微信收款碼。當(dāng)然寫文章不是一定要讓您給賞金的，有您的支持和贊助，我會有更多動力來寫文章和大家分享的，再次感謝您的支持和理解！

在線咨詢

上一篇：ASP.NET Web Forms-事件
下一篇：一款開源免費的動態(tài)桌面壁紙軟件-lively

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML中實現(xiàn)鼠標(biāo)移動到table中某個單元格中顏色改變

html中，我們經(jīng)常會用到table布局；有時候需要實現(xiàn)指定單元格，當(dāng)鼠標(biāo)移動到上面的時候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

您的項目需求