Wednesday, 4 May 2016

How to Make Background Color of a Table Data Change on Hover Using CSS

HTML tables are used to layout web pages and are controlled basically by the <table> tag and its subsets. The table cell holds data and is controlled by the <td> tag which is a subset of <tr> and <table> tag. Sometimes one may desire to make the background of a table <td> change when a mouse pointer is moved over the region. This is desired to apply some effects to the data controlled by the <td> tag especially when it is a hyperlink. It may be achieved with
JavaScript using the OnMouseOver events but will not work when a client turn off JavaScript feature of his/her browser. In this post I will demonstrate how we can do it with Cascading Style Sheets (CSS). With CSS, the effect will be seen even when JavaScript is turned off.

The Code
The easiest way to achieve this to use the <div> tag in combination with table tags. We use the <div> tag to link a CSS code to the table. In the CSS code we define the behavior of the <td> tag by fiddling with the “hover” selector and use it later in our HTML. For this exercise, create two files; CSS and HTML files. Insert the following code in the CSS file:
div.table_style td:hover {
    background-color: #00CCFF;         
Save the file as td.css. Next create an HTML file and add the code <link href="links.css" rel="stylesheet" type="text/css" /> in the head section before the <meta> tag.
Now we need to ensure that the right table is affected by enclosing it inside the <div> tag using the name associated with it in our CSS code (in this case table_style). The code below is a complete implementation of the technique. When properly used, the background color of <td> tag changes when the mouse is moved over it.

<div class="table_style"><table width="440" align="center">
        <td width="220" height="220" align="center" valign="middle"><a href="page1.html?item=al"><img src="img1.gif" alt="ad_links" width="200" height="200" border="0" /></a></td>
        <td width="220" height="220" align="center" valign="middle"><a href="page2.html?item=aa"><img src="img2.gif" alt="android_apps" width="200" height="200" border="0" /></a></td>
        <td width="220" height="220" align="center" valign="middle"><a href="page3.html?item=gu"><img src="img3.gif" alt="gift_unit" width="200" height="200" border="0" /></a></td>
        <td width="220" height="220" align="center" valign="middle"><a href="page4.html?item=vip"><img src="img4.gif" alt="vip_badge" width="200" height="200" border="0" /></a></td>

The above is the HTML code for a 2 x 2 (two rows and two columns) table with hyperlinked images in each <td> of the table. When the mouse is moved over each cell, the background color changes from white to a shade of blue. You can change the color to suit you by editing “background-color” part of the CSS code. To make things simple, make sure the images are in the same folder with your CSS and HTML scripts. Notice how the <div> tag at the beginning of the above code is used to link the table properties defined in our CSS.

Carefully following the procedure above will surely produce the desired result. CSS really make life easy as it can replace JavaScript to create some effects. CSS has made the technique I used in this post very flexible in the sense that you can apply the effect to many tables without have to copy the CSS code and start pasting wherever you want the effect. A single CSS file can control the style of all the HTML documents of a website. I hope this has been educative. Thanks for viewing.


Post a Comment

Add a comment here