Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

How to Color Alternating Rows or Columns in a Table

By Stephen Bucaro

It can be difficult for your eyes to follow a row or column across a large table. One way to make it easier is to add a background color to alternating rows or columns. Shown below is the table that we'll use for this example. It's a table of the mileage between various cities.

	Boston	Chicago	Dallas	Denver	Fargo	Houston	Memphis	Miami	Phoenix	Reno	Raleigh	Seattle	Wichita
Boston		983	1764	1970	1629	1844	1312	1482	2681	2881	702	3054	1613
Chicago	983		926	1002	641	1085	531	1381	1794	1913	912	2063	724
Dallas	1764	926		880	1079	228	453	1307	1066	1668	1191	2193	361
Denver	1970	1002	880		873	1097	22069	2069	908	1051	1678	1320	519
Fargo	1629	641	1079	873		1321	1054	2025	1780	1564	1460	1424	685
Houston	1844	1085	228	1035	1321		575	1186	1178	1904	1202	2431	595
Memphis	1312	531	453	1097	1054	575		1012	1471	2029	753	2299	577
Miami	1482	1381	1307	2069	2025	1186	1012		2362	3063	797	3315	1587
Phoenix	2681	1794	1066	908	1780	1178	1471	2362		733	2224	1414	1053
Reno	2881	1913	1668	1051	1564	1904	2029	3063	733		2690	720	1558
Raleigh	702	912	1191	1678	1460	1202	753	797	2224	2690		2885	1227
Seattle	3054	2063	2193	1320	1424	2431	2299	3315	1414	720	2885		1828
Wichita	1613	724	361	519	685	595	577	1587	1053	1558	1227	1828

Note that it's a bit difficult to follow the rows across with your eyes. So in the table shown below, I've defined a class blueRow which sets the background color to light blue, and I've applied that class to alternating rows of the table.

	Boston	Chicago	Dallas	Denver	Fargo	Houston	Memphis	Miami	Phoenix	Reno	Raleigh	Seattle	Wichita
Boston		983	1764	1970	1629	1844	1312	1482	2681	2881	702	3054	1613
Chicago	983		926	1002	641	1085	531	1381	1794	1913	912	2063	724
Dallas	1764	926		880	1079	228	453	1307	1066	1668	1191	2193	361
Denver	1970	1002	880		873	1097	22069	2069	908	1051	1678	1320	519
Fargo	1629	641	1079	873		1321	1054	2025	1780	1564	1460	1424	685
Houston	1844	1085	228	1035	1321		575	1186	1178	1904	1202	2431	595
Memphis	1312	531	453	1097	1054	575		1012	1471	2029	753	2299	577
Miami	1482	1381	1307	2069	2025	1186	1012		2362	3063	797	3315	1587
Phoenix	2681	1794	1066	908	1780	1178	1471	2362		733	2224	1414	1053
Reno	2881	1913	1668	1051	1564	1904	2029	3063	733		2690	720	1558
Raleigh	702	912	1191	1678	1460	1202	753	797	2224	2690		2885	1227
Seattle	3054	2063	2193	1320	1424	2431	2299	3315	1414	720	2885		1828
Wichita	1613	724	361	519	685	595	577	1587	1053	1558	1227	1828

<style type="text/css">
.myTable1
{
border-collapse:collapse;
}
.myTable1 td
{
border: 1px solid black;
padding:2px;
font-family:verdana;
font-size:14px;
}
.blueRow
{
background-color:#aaaaff;
}
</style>

<table class="myTable1">
<tr><td>	</td><td>Boston</td><td>Chicago	</td><td>Dallas	</td><td>Denver	</td><td>Fargo	</td><td>Houston</td><td>Memphis</td><td>Miami</td><td>Phoenix</td><td>Reno</td>	<td>Raleigh</td>	<td>Seattle</td><td>Wichita</td></tr>
<tr class="blueRow"><td>Boston	</td><td> 	</td><td>983	</td><td>1764	</td><td>1970	</td><td>1629	</td><td>1844	</td><td>1312	</td><td>1482	</td><td>2681	</td><td>2881	</td><td>702	</td><td>3054	</td><td>1613	</td></tr>		
<tr><td>Chicago	</td><td>983	</td><td> 	</td><td>926	</td><td>1002	</td><td>641	</td><td>1085	</td><td>531	</td><td>1381	</td><td>1794	</td><td>1913	</td><td>912	</td><td>2063	</td><td>724	</td></tr>
<tr class="blueRow"><td>Dallas	</td><td>1764	</td><td>926	</td><td> 	</td><td>880	</td><td>1079	</td><td>228	</td><td>453	</td><td>1307	</td><td>1066	</td><td>1668	</td><td>1191	</td><td>2193	</td><td>361	</td></tr>
<tr><td>Denver	</td><td>1970	</td><td>1002	</td><td>880	</td><td> 	</td><td>873	</td><td>1097	</td><td>22069	</td><td>2069	</td><td>908	</td><td>1051	</td><td>1678	</td><td>1320	</td><td>519	</td></tr>
<tr class="blueRow"><td>Fargo	</td><td>1629	</td><td>641	</td><td>1079	</td><td>873	</td><td> 	</td><td>1321	</td><td>1054	</td><td>2025	</td><td>1780	</td><td>1564	</td><td>1460	</td><td>1424	</td><td>685	</td></tr>
<tr><td>Houston	</td><td>1844	</td><td>1085	</td><td>228	</td><td>1035	</td><td>1321	</td><td> 	</td><td>575	</td><td>1186	</td><td>1178	</td><td>1904	</td><td>1202	</td><td>2431	</td><td>595	</td></tr>
<tr class="blueRow"><td>Memphis	</td><td>1312	</td><td>531	</td><td>453	</td><td>1097	</td><td>1054	</td><td>575	</td><td> 	</td><td>1012	</td><td>1471	</td><td>2029	</td><td>753	</td><td>2299	</td><td>577	</td></tr>
<tr><td>Miami	</td><td>1482	</td><td>1381	</td><td>1307	</td><td>2069	</td><td>2025	</td><td>1186	</td><td>1012	</td><td> 	</td><td>2362	</td><td>3063	</td><td>797	</td><td>3315	</td><td>1587	</td></tr>
<tr class="blueRow"><td>Phoenix	</td><td>2681	</td><td>1794	</td><td>1066	</td><td>908	</td><td>1780	</td><td>1178	</td><td>1471	</td><td>2362	</td><td> 	</td><td>733	</td><td>2224	</td><td>1414	</td><td>1053	</td></tr>
<tr><td>Reno	</td><td>2881	</td><td>1913	</td><td>1668	</td><td>1051	</td><td>1564	</td><td>1904	</td><td>2029	</td><td>3063	</td><td>733	</td><td> 	</td><td>2690	</td><td>720	</td><td>1558	</td></tr>
<tr class="blueRow"><td>Raleigh	</td><td>702	</td><td>912	</td><td>1191	</td><td>1678	</td><td>1460	</td><td>1202	</td><td>753	</td><td>797	</td><td>2224	</td><td>2690	</td><td> 	</td><td>2885	</td><td>1227	</td></tr>
<tr><td>Seattle	</td><td>3054	</td><td>2063	</td><td>2193	</td><td>1320	</td><td>1424	</td><td>2431	</td><td>2299	</td><td>3315	</td><td>1414	</td><td>720	</td><td>2885	</td><td> 	</td><td>1828	</td></tr>
<tr class="blueRow"><td>Wichita	</td><td>1613	</td><td>724	</td><td>361	</td><td>519	</td><td>685	</td><td>595	</td><td>577	</td><td>1587	</td><td>1053	</td><td>1558	</td><td>1227	</td><td>1828	</td><td> 	</td></tr>
</table>