Skip to Content Skip to Navigation

User Experience Toolkit

Table Row Stripping

How to implement row stripping styles via client-side or server-side methods.

Default Implementation

Example:
This is an example table.
Header 1 Header 2 Header 3 Header 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4
HTML:
<table summary="Example of a standard data-table.">
	<caption>This is an example table.</caption>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Row 1, Col 1</td>
			<td>Row 1, Col 2</td>
			<td>Row 1, Col 3</td>
			<td>Row 1, Col 4</td>
		</tr>
		<tr>
			<td>Row 2, Col 1</td>
			<td>Row 2, Col 2</td>
			<td>Row 2, Col 3</td>
			<td>Row 2, Col 4</td>
		</tr>
		<tr>
			<td>Row 3, Col 1</td>
			<td>Row 3, Col 2</td>
			<td>Row 3, Col 3</td>
			<td>Row 3, Col 4</td>
		</tr>
	</tbody>
</table>

By default row stripping will automatically appear on newer browsers that support CSS3. For older browsers there are two different options. Either Client Side or Server Side implementation. See the two different methods below.

Client-Side Implementation

Example:
This is an example table.
Header 1 Header 2 Header 3 Header 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4
HTML:
<table class="row-stripe" summary="Example of a table with 
client-side row stripping applied">
	<caption>This is an example table.</caption>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Row 1, Col 1</td>
			<td>Row 1, Col 2</td>
			<td>Row 1, Col 3</td>
			<td>Row 1, Col 4</td>
		</tr>
		<tr>
			<td>Row 2, Col 1</td>
			<td>Row 2, Col 2</td>
			<td>Row 2, Col 3</td>
			<td>Row 2, Col 4</td>
		</tr>
		<tr>
			<td>Row 3, Col 1</td>
			<td>Row 3, Col 2</td>
			<td>Row 3, Col 3</td>
			<td>Row 3, Col 4</td>
		</tr>
	</tbody>
</table>

To use the client-side row stripping simple add the class of row-stripe to any table. The JavaScript polyfill will go through the table and add the classes needed to every table row. There is no limit to the number of table that can be on a single page and use this method of row stripping. Please note that since this is a style is produced via a JavaScript a flickering of style may occur.

Removing Row Stipping

Example:
This is an example table.
Header 1 Header 2 Header 3 Header 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4
HTML:
<table summary="Example of a standard data-table.">
	<caption>This is an example table.</caption>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Row 1, Col 1</td>
			<td>Row 1, Col 2</td>
			<td>Row 1, Col 3</td>
			<td>Row 1, Col 4</td>
		</tr>
		<tr>
			<td>Row 2, Col 1</td>
			<td>Row 2, Col 2</td>
			<td>Row 2, Col 3</td>
			<td>Row 2, Col 4</td>
		</tr>
		<tr>
			<td>Row 3, Col 1</td>
			<td>Row 3, Col 2</td>
			<td>Row 3, Col 3</td>
			<td>Row 3, Col 4</td>
		</tr>
	</tbody>
</table>

Since all CSS3 compliant browsers will recieve row-stripping by default a new utility class .no-row-strips needs to be added to remove row-stripping.

Server Side Implementation

Example:
This is an example table.
Header 1 Header 2 Header 3 Header 4
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4
HTML:
<table class="row-stripe" summary="Example of a table with 
server side row stripping applied">
	<caption>This is an example table.</caption>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="table-row-odd">Row 1, Col 1</td>
			<td class="table-row-even">Row 1, Col 2</td>
			<td class="table-row-odd">Row 1, Col 3</td>
			<td class="table-row-even">Row 1, Col 4</td>
		</tr>
		<tr>
			<td class="table-row-odd">Row 2, Col 1</td>
			<td class="table-row-even">Row 2, Col 2</td>
			<td class="table-row-odd">Row 2, Col 3</td>
			<td class="table-row-even">Row 2, Col 4</td>
		</tr>
		<tr>
			<td class="table-row-odd">Row 3, Col 1</td>
			<td class="table-row-even">Row 3, Col 2</td>
			<td class="table-row-odd">Row 3, Col 3</td>
			<td class="table-row-even">Row 3, Col 4</td>
		</tr>
	</tbody>
</table>

To use server side row stripping simply add the classes of table-row-odd or table-row-even repectfully as your logic iterates through the table. All rows in thead should be ignored when using this process.

Thanks for the feedback! It will help us improve your experience.