Style and Manipulate Data Tables - tablecloth

tablecloth is a jQuery Plugin that enables to style and manipulate data tables using CSS and JS bootstrap. This plugin will help you easily style HTML tables along with some simple customizations.

Usage:

1. Include necessary css files in your head section

<table cellspacing="1" cellpadding="3" class="tablehead" style="background:#CCC;">
<caption>
<h3>Table &lt;caption&gt; Element</h3>
...
</caption>
<thead>
<tr class="stathead">
<th class="{sorter: false}" colspan="3">2011 Game Log</th>
<th class="{sorter: false}" colspan="8">Passing</th>
<th class="{sorter: false}" colspan="6">Rushing</th>
</tr>
<tr class="colhead">
<th class="{sorter: false}">DATE</th>
<th class="{sorter: false}">OPP</th>
<th class="{sorter: false}">RESULT&nbsp;&nbsp;</th>
<th title="Completions" align="right">CMP</th>
<th title="Pass attempts" align="right"><span style="color:#FF0000;">ATT</span></th>
<th title="Passing yards" align="right">YDS</th>
<th title="Completion percentage" align="right">CMP%</th>
<th title="Longest pass play" align="right">LNG</th>
<th title="Passing touchdowns" align="right">TD</th>
<th title="Interceptions thrown" align="right">INT</th>
<th title="Passer (QB) Rating" align="right">RAT</th>
<th title="Rushing attempts" align="right">ATT</th>
<th title="Total rushing yards" align="right">YDS</th>
<th title="Average yards per carry" align="right">AVG</th>
<th title="Longest run" align="right">LNG</th>
<th title="Rushing touchdowns" align="right">TD</th>
</tr>
</thead>
<tbody>
<tr class="oddrow">
<td>9/3</td>
<td><a href="http://espn.go.com/college-football/team/_/id/2026/appalachian-state-mountaineers">Appalachian State</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=312460259">66-13</a></td>
<td align="right">9</td>
<td align="right">19</td>
<td align="right">149</td>
<td align="right">47.4</td>
<td align="right">55</td>
<td align="right">2</td>
<td align="right">0</td>
<td align="right">148.0</td>
<td align="right">3</td>
<td align="right">16</td>
<td align="right">5.3</td>
<td align="right">12</td>
<td align="right">0</td>
</tr>
<tr class="evenrow">
<td>9/10</td>
<td>@<a href="http://espn.go.com/college-football/team/_/id/151/east-carolina-pirates">East Carolina</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=312530151">17-10</a></td>
<td align="right">8</td>
<td align="right">20</td>
<td align="right">91</td>
<td align="right">40.0</td>
<td align="right">20</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">68.2</td>
<td align="right">12</td>
<td align="right">67</td>
<td align="right">5.6</td>
<td align="right">9</td>
<td align="right">0</td>
</tr>
<tr class="oddrow">
<td>9/17</td>
<td><a href="http://espn.go.com/college-football/team/_/id/2032/arkansas-state-red-wolves">Arkansas State</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=312600259">26-7</a></td>
<td align="right">21</td>
<td align="right">33</td>
<td align="right">292</td>
<td align="right">63.6</td>
<td align="right">52</td>
<td align="right">2</td>
<td align="right">2</td>
<td align="right">145.8</td>
<td align="right">9</td>
<td align="right">31</td>
<td align="right">3.4</td>
<td align="right">16</td>
<td align="right">0</td>
</tr>
<tr class="evenrow">
<td>9/24</td>
<td>@<a href="http://espn.go.com/college-football/team/_/id/276/marshall-thundering-herd">Marshall</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=312670276">30-10</a></td>
<td align="right">22</td>
<td align="right">33</td>
<td align="right">229</td>
<td align="right">66.7</td>
<td align="right">29</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">118.9</td>
<td align="right">3</td>
<td align="right">8</td>
<td align="right">2.7</td>
<td align="right">5</td>
<td align="right">1</td>
</tr>
<tr class="oddrow">
<td>10/1</td>
<td><a href="http://espn.go.com/college-football/team/_/id/228/clemson-tigers">Clemson</a></td>
<td><span class="redfont">L</span> <a href="/ncf/recap?gameId=312740259">23-3</a></td>
<td align="right">15</td>
<td align="right">27</td>
<td align="right">125</td>
<td align="right" nowrap>55.6</td>
<td align="right">16</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">87.0</td>
<td align="right">12</td>
<td align="right">8</td>
<td align="right">0.7</td>
<td align="right">15</td>
<td align="right">0</td>
</tr>
<tr class="evenrow">
<td>10/8</td>
<td><a href="http://espn.go.com/college-football/team/_/id/2390/miami-fl-hurricanes">Miami (FL)</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=312810259">38-35</a></td>
<td align="right">23</td>
<td align="right">25</td>
<td align="right">310</td>
<td align="right" class="highlight-success">92.0</td>
<td align="right">60</td>
<td align="right">3</td>
<td align="right">0</td>
<td align="right">235.8</td>
<td align="right">11</td>
<td align="right">38</td>
<td align="right">3.5</td>
<td align="right">19</td>
<td align="right">2</td>
</tr>
<tr class="oddrow">
<td>10/15</td>
<td>@<a href="http://espn.go.com/college-football/team/_/id/154/wake-forest-demon-deacons">Wake Forest</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=312880154">38-17</a></td>
<td align="right">17</td>
<td align="right">32</td>
<td align="right">280</td>
<td align="right">53.1</td>
<td align="right">44</td>
<td align="right">2</td>
<td align="right">0</td>
<td align="right">147.3</td>
<td align="right">11</td>
<td align="right">30</td>
<td align="right">2.7</td>
<td align="right">19</td>
<td align="right">2</td>
</tr>
<tr class="evenrow">
<td>10/22</td>
<td><a href="http://espn.go.com/college-football/team/_/id/103/boston-college-eagles">Boston College</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=312950259">30-14</a></td>
<td align="right">22</td>
<td align="right">36</td>
<td align="right">268</td>
<td align="right">61.1</td>
<td align="right">31</td>
<td align="right">1</td>
<td align="right">0</td>
<td align="right">132.8</td>
<td align="right">16</td>
<td align="right">60</td>
<td align="right">3.8</td>
<td align="right">9</td>
<td align="right">1</td>
</tr>
<tr class="oddrow">
<td>10/29</td>
<td>@<a href="http://espn.go.com/college-football/team/_/id/150/duke-blue-devils">Duke</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=313020150">14-10</a></td>
<td align="right">17</td>
<td align="right">28</td>
<td align="right">190</td>
<td align="right">60.7</td>
<td align="right">60</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">115.2</td>
<td align="right">10</td>
<td align="right">27</td>
<td align="right">2.7</td>
<td align="right">11</td>
<td align="right">0</td>
</tr>
<tr class="evenrow">
<td>11/10</td>
<td>@<a href="http://espn.go.com/college-football/team/_/id/59/georgia-tech-yellow-jackets">Georgia Tech</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=313140059">37-26</a></td>
<td align="right">7</td>
<td align="right">13</td>
<td align="right">209</td>
<td align="right">53.8</td>
<td align="right">63</td>
<td align="right">3</td>
<td align="right">0</td>
<td align="right">265.0</td>
<td align="right">18</td>
<td align="right">70</td>
<td align="right">3.9</td>
<td align="right">12</td>
<td align="right">2</td>
</tr>
<tr class="oddrow">
<td>11/17</td>
<td><a href="http://espn.go.com/college-football/team/_/id/153/north-carolina-tar-heels">North Carolina</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=313210259">24-21</a></td>
<td align="right">19</td>
<td align="right">32</td>
<td align="right">195</td>
<td align="right">59.4</td>
<td align="right">39</td>
<td align="right">2</td>
<td align="right">0</td>
<td align="right">131.2</td>
<td align="right">13</td>
<td align="right">32</td>
<td align="right">2.5</td>
<td align="right">23</td>
<td align="right">1</td>
</tr>
<tr class="evenrow">
<td>11/26</td>
<td>@<a href="http://espn.go.com/college-football/team/_/id/258/virginia-cavaliers">Virginia</a></td>
<td><span class="greenfont">W</span> <a href="/ncf/recap?gameId=313300258">38-0</a></td>
<td align="right">13</td>
<td align="right">21</td>
<td align="right">187</td>
<td align="right">61.9</td>
<td align="right">52</td>
<td align="right">2</td>
<td align="right">0</td>
<td align="right">168.1</td>
<td align="right">7</td>
<td align="right">27</td>
<td align="right">3.9</td>
<td align="right">14</td>
<td align="right">1</td>
</tr>
<tr class="oddrow">
<td>12/3</td>
<td>@<a href="http://espn.go.com/college-football/team/_/id/228/clemson-tigers">Clemson</a></td>
<td><span class="redfont">L</span> <a href="/ncf/recap?gameId=313370228">38-10</a></td>
<td align="right">22</td>
<td align="right">44</td>
<td align="right">274</td>
<td align="right">50.0</td>
<td align="right">45</td>
<td align="right">1</td>
<td align="right">2</td>
<td align="right">100.7</td>
<td align="right">12</td>
<td align="right">2</td>
<td align="right">0.2</td>
<td align="right">8</td>
<td align="right">0</td>
</tr>
</tbody>
<thead>
<tr class="colhead {sorter: false}">
<th colspan="16">ALLSTATE SUGAR BOWL</th>
</tr>
</thead>
<tbody>
<tr class="evenrow">
<td>1/3</td>
<td><a href="http://espn.go.com/college-football/team/_/id/130/michigan-wolverines">Michigan</a></td>
<td><span class="redfont">L</span> <a href="/ncf/recap?gameId=320030259">23-20 (OT)</a></td>
<td align="right">19</td>
<td align="right">28</td>
<td align="right">214</td>
<td align="right">67.9</td>
<td align="right">30</td>
<td align="right">0</td>
<td align="right">1</td>
<td align="right">124.9</td>
<td align="right">16</td>
<td align="right">53</td>
<td align="right">3.3</td>
<td align="right">13</td>
<td align="right">1</td>
</tr>
</tbody>
</table>

3. Include javascript files

<script src="assets/js/jquery-1.7.2.min.js"></script> 
<script src="assets/js/bootstrap.js"></script> 
<script src="assets/js/jquery.metadata.js"></script> 
<script src="assets/js/jquery.tablesorter.min.js"></script> 
<script src="assets/js/jquery.tablecloth.js"></script> 

4. Initialize the plugin

<script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
        $("table").tablecloth({
          theme: "paper",
          striped: true,
          sortable: true,
          condensed: true
        });
      });
</script>

---

This awesome jQuery plugin is developed by bwsewell. For more Advanced Usages, please check the demo page or visit the official website.