Introduction
In this article I will show you how to add a table highlighting feature in a HTML table. I assume that you have some basic knowledge of HTML, CSS3 and jQuery. If you are not familiar with jQuery then check the links provided at the end of the article. In this article I will show three versions of table highlighting, one is single row highlight, the second is even row highlights and the last is odd row highlights. So let's start.
Preparing the workspace
Before we proceed, let's first set up our base as in the following:
- 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 file as a HTML file.
Single-row highlighting
Sometimes you have seen on websites that, when you move your curser over the table rows, the row's color is changed or is highlighted. This is what we will do in this section. Here we don't need any jQuery for it. This effect can be created using a CSS 3.0 transition property.
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 give it some dimensions add the following styling in the CSS section of our HTML file.
-
td[class*=col]{
width:100px;
height:20px;
}
.row{
background-color:white;
-webkit-transition:all 0.5s;
}
.row:hover{
background-color:#ffbbaa;
}
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 the class as 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 the transition effect on each row. -webkit- is a browser-specific prefix for Chrome since CSS3.0 is not fully supported by all browsers (the Transition effect is supported in most of the browsers so the prefix can be removed).
- Here "all" stands for transition of all CSS properties.
- "0.5s" stands for 0.5 seconds. That is a transition that will take 0.5 seconds to complete.
Summary
You have seen how easy it is to do this highlighting. We didn't used any JavaScript or jQuery. It's a pure HTML and CSS 3.0 based solution. In my next article I'll show you how to highlight each cell individually. So stay tuned . Thanks for reading this article. Don't forget to comment and share.