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