Hack #22. Add Stripes to Data Tables

Make tables easier to read by highlighting alternate rows.

Web pages can display tables of data, like a spreadsheet. However, most web publishers don't put a lot of thought into the usability of large tables. Small improvements such as highlighting every other row can make a huge difference in readability. I honestly didn't think such a little detail would matter to me, since I have normal eyesight and don't spend a lot of time poring over reports or spreadsheets online. But the difference is amazing! I can't imagine how I ever lived without this hack.

The Code

This user script runs on all pages. It is relatively straightforward. It gets all the table rows (<tr> elements) and then loops through them to set the background color to #ddd or #fff.

Save the following user script as tablestripes.user.js:

	// ==UserScript==
	// @name		Table Stripes
	// @namespace	http://diveintomark.org/projects/greasemonkey/
	// @description shade alternating rows of data tables
	// @include		*
	// ==/UserScript==

	var arTableRows = document.getElementsByTagName('tr');
	var bHighlight = true;
	for (var i = arTableRows.length - 1; i >= 0; i--) {
		var elmRow = arTableRows[i];
		elmRow.style.backgroundColor = bHighlight ? '#ddd' : '#fff';
		elmRow.style.color = '#000';
		bHighlight = !bHighlight;

Running the Hack

Before installing the user script, go to http://www.openbsd.org/3.7_packages/i386.html, which displays a large table of available packages for the Open-BSD operating system, as ...

Get Greasemonkey Hacks now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.