프로그래밍/Reference

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

쇠주는참이슬 2012. 5. 11. 10:25

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:

  1. // Without any customizations
  2. $("table").tablecloth();
  3.  
  4. // With customizations
  5. $("table").tablecloth({
  6.   theme: "default",
  7.   bordered: true,
  8.   condensed: true,
  9.   striped: true,
  10.   sortable: true,
  11.   clean: true,
  12.   cleanElements: "th td",
  13.   customClass: "my-table"
  14. });

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

Options

PropertyTypeDefaultDescription
themeString'default'

Applies a theme to the table.

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

borderedBooleanfalseWill add a border to each cell of the table
condensedBooleanfalseWill reduce the top and bottom padding of each cell within a table
stripedBooleanfalseAdds alternating background for each row of a table. Color is dependent on the theme you've set.
sortableBooleanfalse

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:

  1. $("table").tablecloth();
  2. $("table").tablesorter({/* custom tablesorter options */});
cleanBooleanfalse

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.

cleanElementsString'*'

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

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

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

  1. // Add a custom class to your table
  2. $("table").tablecloth({customClass: "my_class"});
  3.  
  4. // Add more than one custom class
  5. $("table").tablecloth({customClass: "my_class another_class"});

Themes

Default Default twitter bootstrap theme

  1. $("table").tablecloth({ theme: "default" });
First NameLast NameEmail AddressHometown
JohnnyAppleseedjohnny.appleseed@email.comNew York, NY
MartyMcFlynot.a.chicken@hotmail.comHill Valley, CA
TucanSamfruity@generalmills.com-
DarthVaderlord.of.the.sith@deathstar.govTatooine

Dark Dark version of twitter bootstrap theme

  1. $("table").tablecloth({ theme: "dark" });
First NameLast NameEmail AddressHometown
JohnnyAppleseedjohnny.appleseed@email.comNew York, NY
MartyMcFlynot.a.chicken@hotmail.comHill Valley, CA
TucanSamfruity@generalmills.com-
DarthVaderlord.of.the.sith@deathstar.govTatooine

Stats ESPN.com style data tables

  1. $("table").tablecloth({ theme: "stats" });
2012 MLB Player Leaders for Batting Avg
BAPlayerTeamGHHR
.411Matt KempLos Angeles Dodgers253712
.404Derek JeterNew York Yankees25444
.395Josh HamiltonTexas Rangers22349
.392David WrightNew York Mets22313
.391David OrtizBoston Red Sox24366
.388Bryan LaHairChicago Cubs22267
.361Ryan SweeneyBoston Red Sox21260
.358Jose AltuveHouston Astros24341
.344Paul KonerkoChicago White Sox24315
.342Robert AndinoBaltimore Orioles23271

Paper Notebook paper themed table

  1. $("table").tablecloth({ theme: "paper" });
Math Vocabulary Words
WordDefinition
Absolute ValueDistance 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 angleAn angle that measures between 0 and 90 degrees
Adjacent anglesTwo coplanar angles with a common side, a common vertex, and no common interior points

Roadmap Features we plan on adding

Remove twitter bootstrapThe 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 SassSass is pretty sweet. We plan on re-organizing the CSS using Sass as well as providing a nice template to create more themes.
More themesMore themes are on the way
Sticky headersCreate an option that allows <head> elements to be sticky to the top of the screen when scrolling through a large table
PaginationCreate an option that allows large tables with many rows to be paginated
SearchableAllow a table to be searchable
Theme creatorSetup a page where users can create their own themes and export CSS