CSS Tables

Simple CSS for HTML Tables

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

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

Bordered Table

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

# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
4 Ford Focus 2008
5 Nissan Sentra 2011
6 BMW M3 2009
7 Honda Civic 2010
8 Kia Soul 2010

Using with Datatable