Greasemonkey Hacks

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