YUI Table CSS

First, include it on your page

Add the CSS on your page:

Optionally, you can load it through the YUI().use():


  YUI().use(gallerycss-csstable', function(Y) {
    Y.log('gallerycss-csstable has been added to the  as a CSS file');     
  });

The latest (unstable) is on Github, and available for forking.

Fork from Github

Default Table

Add the yui3-table classname to a table to style an HTML table similar to how a YUI3 Datatable would be styled. This class adds appropriate padding and borders to table elements, and increases the emphasis on the header.

#	Make	Model	Year
1	Honda	Accord	2009
2	Toyota	Camry	2012
3	Hyundai	Elantra	2010

Bordered Table

To add horizontal and vertical borders to all cells, add the yui3-table-bordered classname to the table element.

#	Make	Model	Year
1	Honda	Accord	2009
2	Toyota	Camry	2012
3	Hyundai	Elantra	2010

Table with Horizontal Borders

If you prefer to just have horizontal lines, add the yui3-table-horizontal classname to the table element.

#	Make	Model	Year
1	Honda	Accord	2009
2	Toyota	Camry	2012
3	Hyundai	Elantra	2010

Striped Table

Large tables are easier to parse visually if rows are easily distinguishable. Adding the yui3-table-odd class name to every other tr element changes the background of the row and creates a zebra-styled effect.