Zebra striping - nschonni/wet-boew GitHub Wiki

français

Table of Contents

Overview

Project Lead: Pierre Dubois (@duboisp) - Industry Canada, Canadian Intellectual Property Office

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.

Note: Zebra striping for tables

There arethree 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>

Working Example

Parameters/Options for list object

"list object" make reference to unordered list (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/Options for table object

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

Development

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

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

Known Issues

Future

  • Revise the zebra styling for complex multi-level table

Version History

  • WET 3.0.2
    • This update is about the table parser, but may have repercussion on the zebra striping for complex table.
      • Disabled the default behaviour regarding to detect summary group, that feature now require the option "hassum" to be set on the table element
  • WET 3.0.1
    • Better performance on simple table
    • Removed the option justgroup, as that is the default for complex table styling
    • Added the option complextableparsing and vectorstripe
  • WET 3.0 2012-09-17
    • Column Highlight Support
    • Complex Table Support
    • Definition List Support
  • 1.2 2012-02-06
    • Added French working example
    • Cleaned up the markup in the working examples
    • Added missing CSS properties
    • Updated to the latest version of the GC Web Usability theme
  • 1.1 2011-08-08
    • Updated to latest versions of the HTML5 core markup structure and the CLF 2.0 theme
    • Added support for tables with header rows
    • Replaced JavaScript-based hover effects with CSS-based hover effects
    • Added missing table elements and attributes
    • Removed the need to declare the selector in the params var
    • Corrected heading structure
    • Corrected translation errors
  • 1.0 2010-08-09
    • Initial release

Related Pages

⚠️ **GitHub.com Fallback** ⚠️