tablecloth.js

Making HTML tables suck less

tablecloth.js

Making HTML tables suck less

tablecloth.js

Making HTML tables suck less

 
tablecloth.js is a jQuery plugin that helps you easily style HTML tables along with some simple customizations.

We've all been there. Either you're redesigning a large site or working on a completely new one... styling tables is typically tedious and time-consuming. If you'd rather spend your valuable time making the other elements of your site pretty, use tablecloth to do the heavy lifting:

// Without any customizations
$("table").tablecloth();

// With customizations
$("table").tablecloth({
  theme: "default",
  bordered: true,
  condensed: true,
  striped: true,
  sortable: true,
  clean: true,
  cleanElements: "th td",
  customClass: "my-table"
});

tablecloth builds off the Twitter Bootstrap. It also includes popular jQuery table manipulation plugins like tablesorter.

Property Type Default Description
theme String 'default'

Applies a theme to the table.

Available themes: 'default', 'none', 'stats'

bordered Boolean false Will add a border to each cell of the table
condensed Boolean false Will reduce the top and bottom padding of each cell within a table
striped Boolean false Adds alternating background for each row of a table. Color is dependent on the theme you've set.
sortable Boolean false

Enables the tablesorter jQuery plugin to allow sorting of table columns.

This feature will only work if you've loaded jquery.tablesorter.js and jquery.metadata.js

If you wish to pass custom parameters to the tablesorter plugin, call .tablesorter() on your table object separately:

$("table").tablecloth();
$("table").tablesorter({/* custom tablesorter options */});
clean Boolean false

Removes inline styling and deprecated table attributes from the <table> element as well as any children elements inside the table.

By default it will remove the style, cellpadding, cellspacing, bgcolor, align, width and nowrap attributes from <table> and all child elements. In addition, it was also remove any of the current classes for the <table> element.

cleanElements String '*'

If you have set clean: true, this option will allow you to specify which child elements you wish to remove attributes from.

The default value is the universal selector '*' which allows all children elements of the <table> to be cleaned.

So let's say you have a lot of inline styling you wish to retain on a lot of <td> elements...

// Will only remove unwanted attributes from <thead>, <tbody>, <tr> and <th> elements
// Attributes from any <td> elements will remain unchanged
$("table").tablecloth({clean: true, cleanElements: "thead,tbody,tr,th"});
customClass String  

Will add a custom class to your <table> element:

// Add a custom class to your table
$("table").tablecloth({customClass: "my_class"});

// Add more than one custom class
$("table").tablecloth({customClass: "my_class another_class"});

Default Default twitter bootstrap theme

$("table").tablecloth({ theme: "default" });
First Name Last Name Email Address Hometown
Johnny Appleseed johnny.appleseed@email.com New York, NY
Marty McFly not.a.chicken@hotmail.com Hill Valley, CA
Tucan Sam fruity@generalmills.com -
Darth Vader lord.of.the.sith@deathstar.gov Tatooine
First Name Last Name Hometown
Johnny Appleseed New York, NY
Marty McFly Hill Valley, CA
Tucan Sam -
Darth Vader Tatooine

Dark Dark version of twitter bootstrap theme

$("table").tablecloth({ theme: "dark" });
First Name Last Name Email Address Hometown
Johnny Appleseed johnny.appleseed@email.com New York, NY
Marty McFly not.a.chicken@hotmail.com Hill Valley, CA
Tucan Sam fruity@generalmills.com -
Darth Vader lord.of.the.sith@deathstar.gov Tatooine
First Name Last Name Hometown
Johnny Appleseed New York, NY
Marty McFly Hill Valley, CA
Tucan Sam -
Darth Vader Tatooine

Stats ESPN.com style data tables

$("table").tablecloth({ theme: "stats" });
2012 MLB Player Leaders for Batting Avg
BA Player Team G H HR
.411 Matt Kemp Los Angeles Dodgers 25 37 12
.404 Derek Jeter New York Yankees 25 44 4
.395 Josh Hamilton Texas Rangers 22 34 9
.392 David Wright New York Mets 22 31 3
.391 David Ortiz Boston Red Sox 24 36 6
.388 Bryan LaHair Chicago Cubs 22 26 7
.361 Ryan Sweeney Boston Red Sox 21 26 0
.358 Jose Altuve Houston Astros 24 34 1
.344 Paul Konerko Chicago White Sox 24 31 5
.342 Robert Andino Baltimore Orioles 23 27 1

Paper Notebook paper themed table

$("table").tablecloth({ theme: "paper" });
Math Vocabulary Words
Word Definition
Absolute Value Distance of a number from zero on a number line. Since distance is always positive, the absolute value of any number must be positive. Caution: be careful when taking the absolute value of a variable, since you may have several possible correct solutions.
Acute angle An angle that measures between 0 and 90 degrees
Adjacent angles Two coplanar angles with a common side, a common vertex, and no common interior points
Remove twitter bootstrap The less third party stuff, the better. You can add the bootstrap in yourself if you'd like. We'll stick to making this work perfectly regardless of whether or not you use the twitter bootstrap.
Rewrite tablecloth.css with Sass Sass is pretty sweet. We plan on re-organizing the CSS using Sass as well as providing a nice template to create more themes.
More themes More themes are on the way
Sticky headers Create an option that allows <thead> elements to be sticky to the top of the screen when scrolling through a large table
Pagination Create an option that allows large tables with many rows to be paginated
Searchable Allow a table to be searchable
Theme creator Setup a page where users can create their own themes and export CSS