Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

How to Color Alternating Rows or Columns in a Table

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.

BostonChicago Dallas Denver Fargo HoustonMemphisMiamiPhoenixReno Raleigh SeattleWichita
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.

BostonChicago Dallas Denver Fargo HoustonMemphisMiamiPhoenixReno Raleigh SeattleWichita
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>



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268