Jesse Smith shows you how to replace those long, cumbersome, and hard-to-maintain JavaScripts with CSS to improve maintainability across arguably the most common user interface for the Web: the HTML table.

Like this article? We recommend

As a developer, you have likely come across the need to improve interface functionality for users. The most common is probably working with data tables. These HTML tables can get quite large and thus need improved functionality to improve user experience. For example, there are times when you need to lock a table's header row or far-left column (or both). The reason for this is so that the user can scroll large data sets and still know what columns (header row) the data belongs to, along with their associated record IDs (far left column).

Using CSS instead of JavaScript will greatly improve maintainability as you only need to change or add something in one spot to get the desired outcome (the .css file). You no longer need to debug large JavaScripts, which can become quite tedious.

This article will get you started with using CSS where JavaScript has most commonly been used to add interface functionality to a web application with regard to an HTML table.

Adding Functionality to an HTML table

The first example will be locking a table's header. This is often needed when vertically scrolling large data sets, so that the user always know which columns the data belong to, no matter how many records they scroll across.

If you look on the Web, you'll find various solutions to getting this functionality, from creating multiple tables (a separate one for the header row) to using JavaScript and JQuery.

Using multiple tables works fine, but then you run into the problem of having to use JavaScript to scroll the header row along with the data table if you have lots of columns that necessitate horizontal scrolling to see them all.

Using JavaScript works good, but the script for this could be more than 100 lines of code or more, thus making it hard to maintain or add new functionality without debugging so much code.

Using JQuery is probably the best solution of the three described here. The problem with JQuery, though, is that of security and hard-to-read syntax. While the code is much less than JavaScript to achieve the same task, you still have to learn all of JQuery's usage syntax to become adept at using it. It is nearly similar to learning a new language and can take a considerable amount of time.

The CSS solution trumps all, as it is the most simple and easy to maintain. The next few examples will show just how easy it is.

Locking the Header Row

To lock the header row of a table with a tbody tag, simply add this line to your CSS file:

To see this working live, you can use a wonderful tool called JS Fiddle at http://jsfiddle.net/. Simply copy and paste the code into their appropriate sections and run the code. You can expand on this and take it in any direction you like.

Locking the Far Left Column

To lock the far left column, you add a class and assign the class to each <td> tag in the column. An example table appears below to illustrate this:

Conclusion

In this article, you learned how to use CSS to replace JavaScript in your current and future web applications for better maintainability and user experience. While there are some things CSS just cannot do, I hope to address these in a later article.

CSS is good at manipulating presentation elements, but cannot go beyond this to manipulate the data (i.e., like sorting columns). You need JavaScript/JQuery for this. However, you can use CSS to aid these technologies in several ways, giving your users the best user interface they could ask for. HTML5 is now coming on the scene and it looks to be promising to improve the way presentation data is handled, along with actual data manipulation. Most browsers now have a beta version of HTML5.

CSS has been around a long time, so all modern browsers support it, having come out in the last several years. Let's face it, if anyone is still using IE 5 or something this old, they probably shouldn't be using a computer :)!