Zebra Striping

français

Table of Contents Overview Purpose Note: Zebra striping for tables Implementation Parameters/Options for list object alterwg class nohover class nomargin class Parameters/Options for table object hassum class columnhighlight class norowheaderhighlight class nocolheaderhighlight class complextableparsing class vectorstripe class Development Known Issues Future Version History Related Pages

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

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.

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

• Zebra striping
• Simple Table
• Simple Group Table

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.

• About the Table Usability Concept
• Extended definition of HTML 5 table elements

Case Studies

• Case Studies #1
• Nutrition Facts table
• Ottawa Senators vs. Buffalo Sabres - Game ID # 270519002

HTML Table Validator

• HTML Table Validator (With ids/headers/aria-describedby auto assignation)

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

• H51: Using table markup to present tabular information
• H39: Using caption elements to associate data table captions with data tables
• H73: Using the summary attribute of the table element to give an overview of data tables
• H63: Using the scope attribute to associate header cells and data cells in data tables
• H43: Using id and headers attributes to associate data cells with header cells in data tables
• H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
• F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content
• F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
• F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
• G57: Ordering the content in a meaningful sequence

Known Issues

• There are no know issue currently. If you find one, please contribute by filing an new issue.

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

• 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

• HTML Tables and WET Table Parser