Zebra striping

Zebra striping for tables

Table footnotes added in the tfoot row group in a table is not supported by the zebra stripping project. If you have table like that, you may have a WCAG 2.0 Faillure by mixing a layout table with a data table.

• F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
• 4.13.5 Footnotes (Common idioms without dedicated elements)

There are three kinds of zebra striping for tables:

• Zebra striping for simple tables
  • Generates alternating white and blue zebra striping
• Zebra striping for complex tables
  • Generates larger border between data group
  • Supports styling for key cell and description cell
• Zebra striping for complex table with the option "hassum"
  • Generates larger border between two or more consecutive data or summary groups
  • Changes the background colour for cells that are in a summary group

See the difference between ...

• A simple table and a complex table
  • Simple Table
  • Simple Grouping Table
• A complex table and a complex table with the option "hassum"
  • Invoice Table

Simple Table definition

• Zero or one row used to define column headers. That row is located at the top of the table.
• Zero or one column used to define row headers. The row headers is the first cell for each row, excluding the first table row if it used for columns headers.
• One data column group
• Zero summary column group
• One data row group,
• Zero summary row group defined with a tbody element.
• Zero or one summary row group defined with the tfoot element
• If there is no table columns summaries (summary row group defined with a tfoot element), the row grouping elements thead, tbody can be omitted.

alterwg class

Generates alternating white and gray stripes on list objects.

nohover class

Disables the default hover effect on list objects.

nomargin class

Removes the default left margin on list objects.

hassum class

This is a table parser option not related to the zebra striping. But this option may change the default zebra stilling on complex table.

That option is to let the table parser know if the table can contains summary group, by default each group is known as a data group. An example that show this new option is the Invoice Table Working Examples. Please read the HTML Table techniques issued from the WET Toolbox 3.0 documentation for more details.

columnhighlight class

Applies column base striping. To get it working, your table must contain the col element.

norowheaderhighlight class

Removes the row cell header highlight on data cell mouse hover.

nocolheaderhighlight class

Removes the column cell header highlight on data cell mouse hover.

complextableparsing class

Force the simple table to be analyzed with the table usability parser. This enables the header cell highlight on simple tables. To have the alternating blue and white row styling, use the vectorstripe option.

vectorstripe class

Force the alternate row styling, blue and white, even on complex table