Tables - Grid System

Table of contents

Related accessibility topic

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