간단하게 테이블 스타일을 지정

bwsewell-tablecloth-v1.0.0-0-g4c457a1.zip

간단한 테이블 스타일링

Jquery 와 CSS를 이용한 간단한 테이블 스타일링.

기본 테마를 몇가지 갖추고 있어서 간단하게 스타일잡기에 좋은듯..

출처 : http://tableclothjs.com/

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.

Options

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"});

Themes

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

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

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

Roadmap Features we plan on adding

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 <head> 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