JavaScript Widgets
- Zebra Table
- Wizard
- Max Char
- Data Table
A table with odd and even tr rows rendered automatically (without specifying class="even"
manually).
Country | Total area | Land area |
---|---|---|
Denmark | 43,070 | 42,370 |
Finland | 337,030 | 305,470 |
Iceland | 103,000 | 100,250 |
Norway | 324,220 | 307,860 |
Sweden | 449,964 | 410,928 |
Include the following java scripts on your page.
<script type="text/javascript" src="http://www.ucsd.edu/common/cwp/active-cherry/lib/jquery.zebratable-1.0/jquery.zebratable-min.js" /></script> <script type="text/javascript"> (function($) { $(document).ready(function() { // table $(".zebratable").zebratable(); }); })(jQuery); </script>
In this case, we specified that all elements with class zebratable
will have the row coloring. You should always have table class="styled"
since CSS styling are being applied to it.
<table class="zebratable styled"> <thead> <tr> <th>Country</th> <th>Total area</th> <th>Land area</th> </tr> </thead> <tbody> <tr> <td>Denmark</td> <td>43,070</td> <td>42,370</td> </tr> <tr> <td>Finland</td> <td>337,030</td> <td>305,470</td> </tr> <tr> <td>Iceland</td> <td>103,000</td> <td>100,250</td> </tr> <tr> <td>Norway</td> <td>324,220</td> <td>307,860</td> </tr> <tr> <td>Sweden</td> <td>449,964</td> <td>410,928</td> </tr> </tbody> </table>