Submit your widget

jQuery StyleTable Plugin

Created 14 years ago   Views 18826   downloads 3682    Author sarfraznawaz2005
jQuery StyleTable Plugin
View DemoDownload
251
Share |

The StyleTable is free/open source jQuery plugin that can be used to style the tables.

How To Use

Using StyleTable plugin is as easy as this line of code:

 $('table').styleTable();

That will style all tables on the page. Make sure to wrap your code in ready handler like this:

 $(document).ready(function(){
  $('table').styleTable();
 });
 

You can also specify the table(s) with specific class or id that you want styled:

 $(document).ready(function(){
  $('table').styleTable();    // styles all tables on the page
  $('table.fancy').styleTable();   // styles all tables on the page with class set to fancy
  $('table#stylish').styleTable();  // styles a single table with id set to stylish
 });
 

Make sure to include the jQuery library first and then StyleTable plugin before applying styles to the tables.

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="styletable.jquery.plugin.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   $('table').styleTable();
  });
 </script>
 

Plugin Options

I have tried to make option names self-explanatory. Here they are:

 // settings for headings
 th_bgcolor    // heading background color
 th_image   // heading background image
 th_color   // heading text color
 th_border_color  // heading top/bottom border color
 
 // settings for rows
 tr_odd_bgcolor  // odd row background color
 tr_even_bgcolor  // even row background color
 tr_bgcolor   // all rows background color
 tr_hover_bgcolor // row background color on hover
 tr_odd_image  // odd row background image
 tr_even_image  // even row background image
 tr_image   // all rows background image
 tr_hover_image  // row background image on hover
 tr_odd_color  // odd row text color
 tr_even_color  // even row text color
 tr_color   // all rows text color
 tr_border_color  // all rows border color

 // settings for columns
 td_odd_bgcolor  // odd column background color
 td_even_bgcolor  // even column background color
 td_hover_bgcolor // column background color on hover
 td_odd_image  // odd column background image
 td_even_image  // even column background image
 td_hover_image  // column background image on hover
 td_odd_color  // odd column text color
 td_even_color  // even column text color
 
 // settings for table
 font_name   // font name/family to be used for the table
 font_size   // font size to be used for the table
 

Since this plugin is free/open source, you can go on to modifying/adding more options to the plugin.