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

6 comments:

  1. MattAugust 2, 2010 at 9:08 AM

    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 ...

    ReplyDelete
  2. Suprotim AgarwalAugust 2, 2010 at 6:19 PM

    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.

    ReplyDelete
  3. AlexSAugust 13, 2010 at 8:28 AM

    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

    ReplyDelete
  4. JoNaThAnNovember 25, 2010 at 2:48 AM

    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

    ReplyDelete
  5. AnonymousMarch 17, 2011 at 10:39 AM

    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?

    ReplyDelete
  6. AnonymousApril 14, 2011 at 3:17 AM

    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.

    ReplyDelete