Introduction
In Part 1 of this article deries we made a single row highlighting effect. In this article we are creating a single column and a single table cell highlighting feature. I assume that the reader has a basic understanding of HTML, CSS3 and jQuery. If you are not aware of jQuery then check the links provided at the end of the article. In this part we will create a column and cell highlighter for the HTML table.
Preparing the workspace
Before we proceed, let's first set up our base.
- Create a new text file and paste the following code in it.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css"rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset="utf-8" />
<title>Table Highlight by Arpit</title>
<style>
/* we will use this section for adding css classes or any styling */
</style>
</head>
<body>
<!-- HTML will go here -->
<script>
$(document).ready(function () {
// We will use this for adding our jQuery or scripts
});
</script>
</body>
</html>
- Save this as a HTML file.
Single Cell Highlighting
This effect highlights the cell of the table when the user moves the cursor on it. This effect is very much similar to a single-row highlighter and requires no JavaScript or jQuery.
To create a sample table, copy the following HTML and paste it in our newly created HTML file's HTML section.
<table id="tbl" border="1">
<tr class="row">
<td class="col1">1</td><td class="col2">2</td><td class="col3">3</td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1">1</td><td class="col2">2</td><td class="col3">3</td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1">1</td><td class="col2">2</td><td class="col3">3</td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr class="row">
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
</table>
The code above will create a simple 6X3 empty table. To provide some dimensions for it add the following styling in the CSS section of our HTML file.
-
td[class*=col]{
width:100px;
height:20px;
background-color:white;
-webkit-transition:all 0.5s;
}
td[class*=col]:hover{
background-color:rgba(153,240,246,0.5);
}
In the code above the line td[class*=col] is responsible for selecting all the td (cells) using a * wild card. It will select all "td" tags with a class of col1, col2, col3 and so on. The width and height of each cell is set to 100px and 20px respectively.
- The ".row" class is used for setting the default properties of the row.
- "-webkit-transition:all 0.5s" is used for adding a transition effect on each cell of the table. "-webkit-" is a browser-specific prefix for Chrome since CSS3.0 is not fully supported by all browsers. (Transition effect is supported in most browsers so the prefix can be removed.)
- Here "all" specifies transition of all CSS property.
- "0.5s" stands for 0.5 seconds. That is, the transition will take 0.5 seconds to complete.
-
The line td[class*=col]:hover applies the transition effect style on the cell when the user hovers the curser on the cell.
![]()
![]()
![]()
Column Highlight
Now this is a bit more difficult than row or cell highlighting. Here we need to use jQuery. In this effect the entire column is highlighted when the user hovers the cursor on that column. The HTML is the same as above. You just need to add the following code in your HTML file under the script tags.
$(".col1").mouseenter(function(){
$(".col1").animate({
backgroundColor:"#54B9D2"
},100);
});
$(".col1").mouseleave(function(){
$(".col1").animate({
backgroundColor:"#ffffff"
},100);
});
$(".col2").mouseenter(function(){
$(".col2").animate({
backgroundColor:"#54B9D2"
},100);
});
$(".col2").mouseleave(function(){
$(".col2").animate({
backgroundColor:"#ffffff"
},100);
});
$(".col3").mouseenter(function(){
$(".col3").animate({
backgroundColor:"#54B9D2"
},100);
});
$(".col3").mouseleave(function(){
$(".col3").animate({
backgroundColor:"#ffffff"
},100);
});
});
The code is self-explanatory if you are aware of jQuery syntax and events. MouseEnter events use the animate function for changing the color and the mouseleave event is used for resetting the column color. Here the code is written for three columns, for more then three the same code can be repeated.
![]()
Summary
You can see how easy it is to do this cell highlighting. We didn't used any JavaScript or jQuery. It's a pure HTML and CSS 3.0 based solution. In column highlighting, we used jQuery since there is no CSS selector available for selecting columns. In my next article I'll show you how to highlight even and odd rows. So stay tuned . Thanks for reading this article. Don't forget to comment and share.