Zebra striping

Overview

Project Lead: Pierre Dubois (@duboisp)

Purpose

Adds zebra stripes to ordered list, unordered list, definition list, table rows, table columns and provide visual support for the complex data table relationship.

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.

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

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.

Implementation

To implement this feature, add the class wet-boew-zebra to the top ul, ol, dl or table element.

<table class="wet-boew-zebra">
	<caption class="align-left">Example 1</caption>
	<thead>
		<tr><th id="tbl5">Header</th><th id="tbl6">Header</th></tr>
	</thead>
	<tbody>
		<tr><td>Data</td><td>Data</td></tr>
		<tr><td>Data</td><td>Data</td></tr>
		<tr><td>Data</td><td>Data</td></tr>
		<tr><td>Data</td><td>Data</td></tr>
		<tr><td>Data</td><td>Data</td></tr>
		<tr><td>Data</td><td>Data</td></tr>
	</tbody>
</table>

Parameters for list objects

List objects are unordered lists (ul), ordered list (ol) and definition list (dl).

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.

Parameters for table 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

Examples

Development

The zebra striping for tables use an advance table parser to auto detect the data cell relationship. The cell (th, td) relationship is determined based on their placement, size and which group (colgroup, col, thead, tbody, tfoot) they belong to.

Known Issues

None at this time.

Future

  • Revise the zebra styling for complex multi-level table
  • SCSS - Use more significative @extends like "%zebra-table-summary-background-color" instead of "%zebra-background-color-eee". That with the objective of ease future customization.

Version History

References

Case Studies

HTML Table Validator

Draft WCAG 2.0 Technique

  1. Defining a Key Cell
  2. Defining a Data Row Group
  3. Summaries a Data Row Group
  4. Structuring the Header Row
  5. Describing a Row Header Cell
  6. Describing a Row Group Header Cell
  7. Defining Column Group Header
  8. Structuring the Header Column Cell
  9. Defining a Data Column Group
  10. Summaries a Data Column Group
  11. Describing a Column Header Cell
  12. Defining a Layout Cell

WCAG 2.0 Technique