jQuery StyleTable Plugin

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

jQuery StyleTable plugin

How To Use

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

view plainprint?
  1. $('table').styleTable();  
That will style all tables on the page. Make sure to wrap your code in ready handler like this:
view plainprint?
  1. $(document).ready(function(){  
  2.     $('table').styleTable();  
  3. });  
You can also specify the table(s) with specific class or id that you want styled:
view plainprint?
  1. $(document).ready(function(){  
  2.     $('table').styleTable();            // styles all tables on the page  
  3.     $('table.fancy').styleTable();      // styles all tables on the page with class set to fancy  
  4.     $('table#stylish').styleTable();    // styles a single table with id set to stylish  
  5. });  
Make sure to include the jQuery library first and then StyleTable plugin before applying styles to the tables.
view plainprint?
  1. <script type="text/javascript" src="jquery.js"></script>  
  2. <script type="text/javascript" src="styletable.jquery.plugin.js"></script>  
  3. <script type="text/javascript">  
  4.     $(document).ready(function(){  
  5.         $('table').styleTable();  
  6.     });  
  7. </script>  

Plugin Options

I have tried to make option names self-explanatory. Here they are:
view plainprint?
  1. // settings for headings  
  2. th_bgcolor          // heading background color  
  3. th_image            // heading background image  
  4. th_color            // heading text color  
  5. th_border_color     // heading top/bottom border color  
  6.   
  7. // settings for rows  
  8. tr_odd_bgcolor      // odd row background color  
  9. tr_even_bgcolor     // even row background color  
  10. tr_bgcolor          // all rows background color  
  11. tr_hover_bgcolor    // row background color on hover  
  12. tr_odd_image        // odd row background image  
  13. tr_even_image       // even row background image  
  14. tr_image            // all rows background image  
  15. tr_hover_image      // row background image on hover  
  16. tr_odd_color        // odd row text color  
  17. tr_even_color       // even row text color  
  18. tr_color            // all rows text color  
  19. tr_border_color     // all rows border color  
  20.   
  21. // settings for columns  
  22. td_odd_bgcolor      // odd column background color  
  23. td_even_bgcolor     // even column background color  
  24. td_hover_bgcolor    // column background color on hover  
  25. td_odd_image        // odd column background image  
  26. td_even_image       // even column background image  
  27. td_hover_image      // column background image on hover  
  28. td_odd_color        // odd column text color  
  29. td_even_color       // even column text color  
  30.   
  31. // settings for table  
  32. font_name           // font name/family to be used for the table  
  33. 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.

Examples

→ Table not using StyleTable plugin

Subject View Edit Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with default options

view plainprint?
  1. $('table#table1').styleTable();  
Subject View Edit Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 1

view plainprint?
  1. $('table#table2').styleTable({  
  2.     th_bgcolor: '#3E83C9',  
  3.     th_color: '#ffffff',  
  4.     th_border_color: '#333333',  
  5.     tr_odd_bgcolor: '#ECF6FC',  
  6.     tr_even_bgcolor: '#ffffff',  
  7.     tr_border_color: '#95BCE2',  
  8.     tr_hover_bgcolor: '#BCD4EC'  
  9. });  
Subject View Edit Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 2

view plainprint?
  1. $('table#table3').styleTable({  
  2.     th_bgcolor: '#B9C9FE',  
  3.     th_color: '#003399',  
  4.     th_border_color: '#003399',  
  5.     tr_odd_bgcolor: '#E8EDFF',  
  6.     tr_even_bgcolor: '#E8EDFF',  
  7.     tr_border_color: '#ffffff',  
  8.     tr_hover_bgcolor: '#D0DAFD'  
  9. });  
Subject View Edit Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 3

view plainprint?
  1. $('table#table4').styleTable({  
  2.     th_bgcolor: '#CDDFB5',  
  3.     th_border_color: '#4C5F3B',  
  4.     tr_odd_bgcolor: '#F2FFE1',  
  5.     tr_even_bgcolor: '#ffffff',  
  6.     tr_border_color: '#6E8F50',  
  7.     tr_hover_bgcolor: '#B4CF9B'  
  8. });  
Subject View Edit Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 4

view plainprint?
  1. $('table#table5').styleTable({  
  2.     th_bgcolor: '#BCD4EC',  
  3.     th_image: './images/center.jpg',  
  4.     th_color: '#000000',  
  5.     th_border_color: '#333333',  
  6.     tr_odd_image: './images/formbg.gif',  
  7.     tr_even_image: './images/hnav-a-bg-black.jpg',  
  8.     tr_hover_image: './images/s_bg.jpg',  
  9.     tr_even_color: '#ffffff',  
  10.     tr_border_color: '#cccccc'  
  11. });  
Subject View Edit Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 5

view plainprint?
  1. $('table#table6').styleTable({  
  2.     th_bgcolor: '#CDDFB5',  
  3.     th_border_color: '#4C5F3B',  
  4.     td_odd_bgcolor: '#ffffff',  
  5.     td_even_bgcolor: '#F2FFE1',  
  6.     td_hover_bgcolor: '#B4CF9B',  
  7.     tr_border_color: '#6E8F50'  
  8. });  
Subject View Edit Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art

→ Table using StyleTable with custom options - example 6

view plainprint?
  1. $('table#table7').styleTable({  
  2.     th_image: './images/bg_hover.png',  
  3.     td_odd_image: './images/bg.jpg',  
  4.     td_even_image: './images/formbg.gif',  
  5.     td_hover_image: './images/bg_topbar.gif'  
  6. });  
Subject View Edit Delete
Accounting
Animation
Anthropology
Archaeology
Architecture
Art




返回 站长图库

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

代码整理：站长图库