Tables - Grid System

Default design

Default table
Header Header Header
Data Data Data
Data Data Data

Supporting classes

Additional CSS is provided to modify the appearance of a table.

Addition CSS: table-accent

Accent style
Header Header Header
Data Data Data
Data Data Data

Addition CSS: table-medium

Medium style
Header Header Header
Data Data Data
Data Data Data

Addition CSS: table-dark

Dark style
Header Header Header
Data Data Data
Data Data Data

Simplified design

Addition CSS: table-simplify

Simple table
Header Header Header
Data Data Data
Data Data Data

Bordered design

Addition CSS: table-bordered table-simplify

Simple table with border
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Versus without table-bordered

Simple table default
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Addition CSS: table-bordered table-simplify table-medium

Simple medium table with border
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Versus without table-bordered

Simple medium table
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Condensed table

Addition CSS: table-condensed

Condensed table
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Versus without table-condensed

Normal table
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Addition CSS: table-condensed table-simplify

Condensed table
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Versus without table-condensed

Normal table
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Note: Headers must be individually aligned right

The align-right CSS on the <table> will only affect the <td> data in the <tr> rows. The headers will remain left aligned, as the table may have horizontal and/or vertical headers and each may need a different alignment. Therefore, in order to right align specifc headers, each <th class="align-right"> must be manually classed, as desired.

Expenses
Dollars (2009) Percentage (2009) Dollars (2008) Percentage (2008)
Human Resources $1,442,421 14.89% $1,524,241 12.99%
Communications $677,325 6.99% $786,533 6.70%
Compensation $1,532,523 15.82% $1,678,235 14.30%
Information Technology $5,361,325 55.36% $6,836,643 58.27%
Administration $437,634 4.52% $563,235 4.80%
Other $233,353 2.41% $344,455 2.94%
Total $9,684,581 100.00% $11,733,342 100.00%

Second level header

Additional CSS: <tr class="table-header">

Financial Table
Header Header Header
Subheading:
Data $1,000,000 $1,000,000
Data $1,000,000 $1,000,000
Data $1,000,000 $1,000,000
Total $3,000,000 $3,000,000

Zebra striping

There are several zebra striping techniques: Learn more about zebra striping

Addition CSS: wet-boew-zebra table-simplify

Striped table
Header Header Header
Data Data Data
Data Data Data
Data Data Data

Note

When using the zebra striping effect, the wet-boew-zebra class must appear first if the table is multi-classed with any other CSS.

Correct: <table class="wet-boew-zebra table-simplify">

Incorrect: <table class="table-simplify wet-boew-zebra">