Style an HTML Table using jQuery UI and Theme Switcher Widget

I have seen numerous questions on the forums about styling an HTML control using jQuery UI and changing the theme using the Theme Roller. In this short post, I will show you a quick and easy way to style an HTML Table using jQuery UI and use the Theme Switcher Widget.

I will be using the jQuery UI CSS Framework which includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. For the sake of simplicity, I will be using the Widget Containers classes only on the Table, but you are free to use the one’s that suit your requirement. Let us see the code first

Update: I have hotlinked to some jQuery resources, including the theme widget in this demo. Please do not hotlink to these resources in your production applications. Check my post How jQuery Resources Hotlinking will Affect your Applications

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Style a HTML Table using jQuery UI (by DevCurry.com)</title>
<
link type="text/css" rel="stylesheet"
href="http://jqueryui.com/themes/base/ui.all.css" />
<
script type="text/javascript"
src="http://jqueryui.com/js/jquery.js"></script>
<
script type="text/javascript">
$(document).ready(function () {
$('#switcher').themeswitcher();
});
</script>
</
head>
<
body style="font-size:70%;">
<
script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</
script>
<
div id="switcher"></div>
<
br /><br />
<
table id="myTable" border="1" class="ui-widget">
<
thead class="ui-widget-header">
<
tr>
<
th>Column 1</th>
<
th>Column 2</th>
<
th>Column 3</th>
</
tr>
</
thead>
<
tbody class="ui-widget-content">
<
tr>
<
td>Row 0 Column 0</td>
<
td >Row 0 Column 1</td>
<
td >Row 0 Column 2</td>
</
tr>
<
tr >
<
td>Row 1 Column 0</td>
<
td>Row 1 Column 1</td>
<
td>Row 1 Column 2</td>
</
tr>
<
tr >
<
td>Row 2 Column 0</td>
<
td>Row 2 Column 1</td>
<
td>Row 2 Column 2</td>
</
tr>
</tbody>
</
table>
<
br />
</
body>
</
html>

To put a Theme Switcher Widget on the page, we added a script tag referencing the themeswitchertool plugin and called themeswitcher() on a div called ‘switcher’. Read more here. This will add a theme switcher widget to your page as shown below:

image

which on expanding will look similar to the following:

image

Finally, the Table is decorated with the Widget Container classes

  • .ui-widget
  • .ui-widget-header
  • .ui-widget-content

Note: Instead of adding the classes to the Table directly, you can also add them through jQuery code like this:

$("#myTable thead").addClass("ui-widget-header");

Before styling

image

After styling

image

See a Live Demo



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

6 comments:

Matt said...

Strange, but the Live Demo doesn't seem to do much in any browser (tested in Chrome, FireFox, and IE) ... It just changes the table header background and the colors.

Maybe I just expected more from the thumbnails under the "Theme:" dropdown ...

Suprotim Agarwal said...

Matt: I did mention in the post "For the sake of simplicity, I will be using the Widget Containers classes only on the Table, but you are free to use the one’s that suit your requirement". You just need to choose the classes and apply them. The link is in the post.

And the demo does what is explained in the article- Change the theme of the table control.

AlexS said...

Well, I have some additional concerns here.
1. What about footer?
2. What about add and even rows
3. What about hover state of rows and cells?

Would be good to see full example. Thanks

JoNaThAn said...

Hi, I also created a JQuery plugin in order to "enhance" an html table, basically applying the css classes (jquery-ui as default) and row navigation functionality

The post:
http://jvitela.com/blog/?p=22

Demo:
http://jvitela.com/test/enhancetable00.html

Anonymous said...

This doesn't work at all. Dont even waste your time with this. The themeroller link here creates a bunch of query strings and if you try to paste in your own code, it won't work. You have to set up the themeroller dropdown with it. But what's purpose of this when you can't even reuse then themes?

Anonymous said...

This will fire HTTP 502 "Connection Forcibly Refused" errors if you run it in an https/SSL environment. I have wasted 100+ hours getting this to work but the problem for an asp.net developer developing a secure site are these calls in the themeswitchertool.js file:

href="//code.jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Trebuchet+MS,+Tahoma,+Verd... etc. etc."

No matter what CDN you connect to it will only fire the parseTheme.css.php file for http protocol.

And just try googling on this corner case & you're sure to get bent. :))

I sure am.