<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference</title>
<style>
table { border-spacing: 0; padding: 0; border: none; }
td { border: none; padding: 0; }
td { width: 1.2em; height: 1.2em; }
</style>
<body>
<p>The following table should have four matching rows gradually changing from red at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ff0000"> </td>
<td style="background: #ee0000"> </td>
<td style="background: #dd0000"> </td>
<td style="background: #cc0000"> </td>
<td style="background: #bb0000"> </td>
<td style="background: #aa0000"> </td>
<td style="background: #990000"> </td>
<td style="background: #880000"> </td>
<td style="background: #770000"> </td>
<td style="background: #660000"> </td>
<td style="background: #550000"> </td>
<td style="background: #440000"> </td>
<td style="background: #330000"> </td>
<td style="background: #220000"> </td>
<td style="background: #110000"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ff0000"> </td>
<td style="background: #ee0000"> </td>
<td style="background: #dd0000"> </td>
<td style="background: #cc0000"> </td>
<td style="background: #bb0000"> </td>
<td style="background: #aa0000"> </td>
<td style="background: #990000"> </td>
<td style="background: #880000"> </td>
<td style="background: #770000"> </td>
<td style="background: #660000"> </td>
<td style="background: #550000"> </td>
<td style="background: #440000"> </td>
<td style="background: #330000"> </td>
<td style="background: #220000"> </td>
<td style="background: #110000"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ff0000"> </td>
<td style="background: #ee0000"> </td>
<td style="background: #dd0000"> </td>
<td style="background: #cc0000"> </td>
<td style="background: #bb0000"> </td>
<td style="background: #aa0000"> </td>
<td style="background: #990000"> </td>
<td style="background: #880000"> </td>
<td style="background: #770000"> </td>
<td style="background: #660000"> </td>
<td style="background: #550000"> </td>
<td style="background: #440000"> </td>
<td style="background: #330000"> </td>
<td style="background: #220000"> </td>
<td style="background: #110000"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ff0000"> </td>
<td style="background: #ee0000"> </td>
<td style="background: #dd0000"> </td>
<td style="background: #cc0000"> </td>
<td style="background: #bb0000"> </td>
<td style="background: #aa0000"> </td>
<td style="background: #990000"> </td>
<td style="background: #880000"> </td>
<td style="background: #770000"> </td>
<td style="background: #660000"> </td>
<td style="background: #550000"> </td>
<td style="background: #440000"> </td>
<td style="background: #330000"> </td>
<td style="background: #220000"> </td>
<td style="background: #110000"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from white at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffeeee"> </td>
<td style="background: #ffdddd"> </td>
<td style="background: #ffcccc"> </td>
<td style="background: #ffbbbb"> </td>
<td style="background: #ffaaaa"> </td>
<td style="background: #ff9999"> </td>
<td style="background: #ff8888"> </td>
<td style="background: #ff7777"> </td>
<td style="background: #ff6666"> </td>
<td style="background: #ff5555"> </td>
<td style="background: #ff4444"> </td>
<td style="background: #ff3333"> </td>
<td style="background: #ff2222"> </td>
<td style="background: #ff1111"> </td>
<td style="background: #ff0000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffeeee"> </td>
<td style="background: #ffdddd"> </td>
<td style="background: #ffcccc"> </td>
<td style="background: #ffbbbb"> </td>
<td style="background: #ffaaaa"> </td>
<td style="background: #ff9999"> </td>
<td style="background: #ff8888"> </td>
<td style="background: #ff7777"> </td>
<td style="background: #ff6666"> </td>
<td style="background: #ff5555"> </td>
<td style="background: #ff4444"> </td>
<td style="background: #ff3333"> </td>
<td style="background: #ff2222"> </td>
<td style="background: #ff1111"> </td>
<td style="background: #ff0000"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffeeee"> </td>
<td style="background: #ffdddd"> </td>
<td style="background: #ffcccc"> </td>
<td style="background: #ffbbbb"> </td>
<td style="background: #ffaaaa"> </td>
<td style="background: #ff9999"> </td>
<td style="background: #ff8888"> </td>
<td style="background: #ff7777"> </td>
<td style="background: #ff6666"> </td>
<td style="background: #ff5555"> </td>
<td style="background: #ff4444"> </td>
<td style="background: #ff3333"> </td>
<td style="background: #ff2222"> </td>
<td style="background: #ff1111"> </td>
<td style="background: #ff0000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffeeee"> </td>
<td style="background: #ffdddd"> </td>
<td style="background: #ffcccc"> </td>
<td style="background: #ffbbbb"> </td>
<td style="background: #ffaaaa"> </td>
<td style="background: #ff9999"> </td>
<td style="background: #ff8888"> </td>
<td style="background: #ff7777"> </td>
<td style="background: #ff6666"> </td>
<td style="background: #ff5555"> </td>
<td style="background: #ff4444"> </td>
<td style="background: #ff3333"> </td>
<td style="background: #ff2222"> </td>
<td style="background: #ff1111"> </td>
<td style="background: #ff0000"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from green at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #00ff00"> </td>
<td style="background: #00ee00"> </td>
<td style="background: #00dd00"> </td>
<td style="background: #00cc00"> </td>
<td style="background: #00bb00"> </td>
<td style="background: #00aa00"> </td>
<td style="background: #009900"> </td>
<td style="background: #008800"> </td>
<td style="background: #007700"> </td>
<td style="background: #006600"> </td>
<td style="background: #005500"> </td>
<td style="background: #004400"> </td>
<td style="background: #003300"> </td>
<td style="background: #002200"> </td>
<td style="background: #001100"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #00ff00"> </td>
<td style="background: #00ee00"> </td>
<td style="background: #00dd00"> </td>
<td style="background: #00cc00"> </td>
<td style="background: #00bb00"> </td>
<td style="background: #00aa00"> </td>
<td style="background: #009900"> </td>
<td style="background: #008800"> </td>
<td style="background: #007700"> </td>
<td style="background: #006600"> </td>
<td style="background: #005500"> </td>
<td style="background: #004400"> </td>
<td style="background: #003300"> </td>
<td style="background: #002200"> </td>
<td style="background: #001100"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #00ff00"> </td>
<td style="background: #00ee00"> </td>
<td style="background: #00dd00"> </td>
<td style="background: #00cc00"> </td>
<td style="background: #00bb00"> </td>
<td style="background: #00aa00"> </td>
<td style="background: #009900"> </td>
<td style="background: #008800"> </td>
<td style="background: #007700"> </td>
<td style="background: #006600"> </td>
<td style="background: #005500"> </td>
<td style="background: #004400"> </td>
<td style="background: #003300"> </td>
<td style="background: #002200"> </td>
<td style="background: #001100"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #00ff00"> </td>
<td style="background: #00ee00"> </td>
<td style="background: #00dd00"> </td>
<td style="background: #00cc00"> </td>
<td style="background: #00bb00"> </td>
<td style="background: #00aa00"> </td>
<td style="background: #009900"> </td>
<td style="background: #008800"> </td>
<td style="background: #007700"> </td>
<td style="background: #006600"> </td>
<td style="background: #005500"> </td>
<td style="background: #004400"> </td>
<td style="background: #003300"> </td>
<td style="background: #002200"> </td>
<td style="background: #001100"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from white at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeffee"> </td>
<td style="background: #ddffdd"> </td>
<td style="background: #ccffcc"> </td>
<td style="background: #bbffbb"> </td>
<td style="background: #aaffaa"> </td>
<td style="background: #99ff99"> </td>
<td style="background: #88ff88"> </td>
<td style="background: #77ff77"> </td>
<td style="background: #66ff66"> </td>
<td style="background: #55ff55"> </td>
<td style="background: #44ff44"> </td>
<td style="background: #33ff33"> </td>
<td style="background: #22ff22"> </td>
<td style="background: #11ff11"> </td>
<td style="background: #00ff00"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeffee"> </td>
<td style="background: #ddffdd"> </td>
<td style="background: #ccffcc"> </td>
<td style="background: #bbffbb"> </td>
<td style="background: #aaffaa"> </td>
<td style="background: #99ff99"> </td>
<td style="background: #88ff88"> </td>
<td style="background: #77ff77"> </td>
<td style="background: #66ff66"> </td>
<td style="background: #55ff55"> </td>
<td style="background: #44ff44"> </td>
<td style="background: #33ff33"> </td>
<td style="background: #22ff22"> </td>
<td style="background: #11ff11"> </td>
<td style="background: #00ff00"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeffee"> </td>
<td style="background: #ddffdd"> </td>
<td style="background: #ccffcc"> </td>
<td style="background: #bbffbb"> </td>
<td style="background: #aaffaa"> </td>
<td style="background: #99ff99"> </td>
<td style="background: #88ff88"> </td>
<td style="background: #77ff77"> </td>
<td style="background: #66ff66"> </td>
<td style="background: #55ff55"> </td>
<td style="background: #44ff44"> </td>
<td style="background: #33ff33"> </td>
<td style="background: #22ff22"> </td>
<td style="background: #11ff11"> </td>
<td style="background: #00ff00"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeffee"> </td>
<td style="background: #ddffdd"> </td>
<td style="background: #ccffcc"> </td>
<td style="background: #bbffbb"> </td>
<td style="background: #aaffaa"> </td>
<td style="background: #99ff99"> </td>
<td style="background: #88ff88"> </td>
<td style="background: #77ff77"> </td>
<td style="background: #66ff66"> </td>
<td style="background: #55ff55"> </td>
<td style="background: #44ff44"> </td>
<td style="background: #33ff33"> </td>
<td style="background: #22ff22"> </td>
<td style="background: #11ff11"> </td>
<td style="background: #00ff00"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from blue at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #0000ff"> </td>
<td style="background: #0000ee"> </td>
<td style="background: #0000dd"> </td>
<td style="background: #0000cc"> </td>
<td style="background: #0000bb"> </td>
<td style="background: #0000aa"> </td>
<td style="background: #000099"> </td>
<td style="background: #000088"> </td>
<td style="background: #000077"> </td>
<td style="background: #000066"> </td>
<td style="background: #000055"> </td>
<td style="background: #000044"> </td>
<td style="background: #000033"> </td>
<td style="background: #000022"> </td>
<td style="background: #000011"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #0000ff"> </td>
<td style="background: #0000ee"> </td>
<td style="background: #0000dd"> </td>
<td style="background: #0000cc"> </td>
<td style="background: #0000bb"> </td>
<td style="background: #0000aa"> </td>
<td style="background: #000099"> </td>
<td style="background: #000088"> </td>
<td style="background: #000077"> </td>
<td style="background: #000066"> </td>
<td style="background: #000055"> </td>
<td style="background: #000044"> </td>
<td style="background: #000033"> </td>
<td style="background: #000022"> </td>
<td style="background: #000011"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #0000ff"> </td>
<td style="background: #0000ee"> </td>
<td style="background: #0000dd"> </td>
<td style="background: #0000cc"> </td>
<td style="background: #0000bb"> </td>
<td style="background: #0000aa"> </td>
<td style="background: #000099"> </td>
<td style="background: #000088"> </td>
<td style="background: #000077"> </td>
<td style="background: #000066"> </td>
<td style="background: #000055"> </td>
<td style="background: #000044"> </td>
<td style="background: #000033"> </td>
<td style="background: #000022"> </td>
<td style="background: #000011"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #0000ff"> </td>
<td style="background: #0000ee"> </td>
<td style="background: #0000dd"> </td>
<td style="background: #0000cc"> </td>
<td style="background: #0000bb"> </td>
<td style="background: #0000aa"> </td>
<td style="background: #000099"> </td>
<td style="background: #000088"> </td>
<td style="background: #000077"> </td>
<td style="background: #000066"> </td>
<td style="background: #000055"> </td>
<td style="background: #000044"> </td>
<td style="background: #000033"> </td>
<td style="background: #000022"> </td>
<td style="background: #000011"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from white at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeeeff"> </td>
<td style="background: #ddddff"> </td>
<td style="background: #ccccff"> </td>
<td style="background: #bbbbff"> </td>
<td style="background: #aaaaff"> </td>
<td style="background: #9999ff"> </td>
<td style="background: #8888ff"> </td>
<td style="background: #7777ff"> </td>
<td style="background: #6666ff"> </td>
<td style="background: #5555ff"> </td>
<td style="background: #4444ff"> </td>
<td style="background: #3333ff"> </td>
<td style="background: #2222ff"> </td>
<td style="background: #1111ff"> </td>
<td style="background: #0000ff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeeeff"> </td>
<td style="background: #ddddff"> </td>
<td style="background: #ccccff"> </td>
<td style="background: #bbbbff"> </td>
<td style="background: #aaaaff"> </td>
<td style="background: #9999ff"> </td>
<td style="background: #8888ff"> </td>
<td style="background: #7777ff"> </td>
<td style="background: #6666ff"> </td>
<td style="background: #5555ff"> </td>
<td style="background: #4444ff"> </td>
<td style="background: #3333ff"> </td>
<td style="background: #2222ff"> </td>
<td style="background: #1111ff"> </td>
<td style="background: #0000ff"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeeeff"> </td>
<td style="background: #ddddff"> </td>
<td style="background: #ccccff"> </td>
<td style="background: #bbbbff"> </td>
<td style="background: #aaaaff"> </td>
<td style="background: #9999ff"> </td>
<td style="background: #8888ff"> </td>
<td style="background: #7777ff"> </td>
<td style="background: #6666ff"> </td>
<td style="background: #5555ff"> </td>
<td style="background: #4444ff"> </td>
<td style="background: #3333ff"> </td>
<td style="background: #2222ff"> </td>
<td style="background: #1111ff"> </td>
<td style="background: #0000ff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeeeff"> </td>
<td style="background: #ddddff"> </td>
<td style="background: #ccccff"> </td>
<td style="background: #bbbbff"> </td>
<td style="background: #aaaaff"> </td>
<td style="background: #9999ff"> </td>
<td style="background: #8888ff"> </td>
<td style="background: #7777ff"> </td>
<td style="background: #6666ff"> </td>
<td style="background: #5555ff"> </td>
<td style="background: #4444ff"> </td>
<td style="background: #3333ff"> </td>
<td style="background: #2222ff"> </td>
<td style="background: #1111ff"> </td>
<td style="background: #0000ff"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from yellow at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ffff00"> </td>
<td style="background: #eeee00"> </td>
<td style="background: #dddd00"> </td>
<td style="background: #cccc00"> </td>
<td style="background: #bbbb00"> </td>
<td style="background: #aaaa00"> </td>
<td style="background: #999900"> </td>
<td style="background: #888800"> </td>
<td style="background: #777700"> </td>
<td style="background: #666600"> </td>
<td style="background: #555500"> </td>
<td style="background: #444400"> </td>
<td style="background: #333300"> </td>
<td style="background: #222200"> </td>
<td style="background: #111100"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffff00"> </td>
<td style="background: #eeee00"> </td>
<td style="background: #dddd00"> </td>
<td style="background: #cccc00"> </td>
<td style="background: #bbbb00"> </td>
<td style="background: #aaaa00"> </td>
<td style="background: #999900"> </td>
<td style="background: #888800"> </td>
<td style="background: #777700"> </td>
<td style="background: #666600"> </td>
<td style="background: #555500"> </td>
<td style="background: #444400"> </td>
<td style="background: #333300"> </td>
<td style="background: #222200"> </td>
<td style="background: #111100"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ffff00"> </td>
<td style="background: #eeee00"> </td>
<td style="background: #dddd00"> </td>
<td style="background: #cccc00"> </td>
<td style="background: #bbbb00"> </td>
<td style="background: #aaaa00"> </td>
<td style="background: #999900"> </td>
<td style="background: #888800"> </td>
<td style="background: #777700"> </td>
<td style="background: #666600"> </td>
<td style="background: #555500"> </td>
<td style="background: #444400"> </td>
<td style="background: #333300"> </td>
<td style="background: #222200"> </td>
<td style="background: #111100"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffff00"> </td>
<td style="background: #eeee00"> </td>
<td style="background: #dddd00"> </td>
<td style="background: #cccc00"> </td>
<td style="background: #bbbb00"> </td>
<td style="background: #aaaa00"> </td>
<td style="background: #999900"> </td>
<td style="background: #888800"> </td>
<td style="background: #777700"> </td>
<td style="background: #666600"> </td>
<td style="background: #555500"> </td>
<td style="background: #444400"> </td>
<td style="background: #333300"> </td>
<td style="background: #222200"> </td>
<td style="background: #111100"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from white at the left to yellow at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffffee"> </td>
<td style="background: #ffffdd"> </td>
<td style="background: #ffffcc"> </td>
<td style="background: #ffffbb"> </td>
<td style="background: #ffffaa"> </td>
<td style="background: #ffff99"> </td>
<td style="background: #ffff88"> </td>
<td style="background: #ffff77"> </td>
<td style="background: #ffff66"> </td>
<td style="background: #ffff55"> </td>
<td style="background: #ffff44"> </td>
<td style="background: #ffff33"> </td>
<td style="background: #ffff22"> </td>
<td style="background: #ffff11"> </td>
<td style="background: #ffff00"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffffee"> </td>
<td style="background: #ffffdd"> </td>
<td style="background: #ffffcc"> </td>
<td style="background: #ffffbb"> </td>
<td style="background: #ffffaa"> </td>
<td style="background: #ffff99"> </td>
<td style="background: #ffff88"> </td>
<td style="background: #ffff77"> </td>
<td style="background: #ffff66"> </td>
<td style="background: #ffff55"> </td>
<td style="background: #ffff44"> </td>
<td style="background: #ffff33"> </td>
<td style="background: #ffff22"> </td>
<td style="background: #ffff11"> </td>
<td style="background: #ffff00"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffffee"> </td>
<td style="background: #ffffdd"> </td>
<td style="background: #ffffcc"> </td>
<td style="background: #ffffbb"> </td>
<td style="background: #ffffaa"> </td>
<td style="background: #ffff99"> </td>
<td style="background: #ffff88"> </td>
<td style="background: #ffff77"> </td>
<td style="background: #ffff66"> </td>
<td style="background: #ffff55"> </td>
<td style="background: #ffff44"> </td>
<td style="background: #ffff33"> </td>
<td style="background: #ffff22"> </td>
<td style="background: #ffff11"> </td>
<td style="background: #ffff00"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffffee"> </td>
<td style="background: #ffffdd"> </td>
<td style="background: #ffffcc"> </td>
<td style="background: #ffffbb"> </td>
<td style="background: #ffffaa"> </td>
<td style="background: #ffff99"> </td>
<td style="background: #ffff88"> </td>
<td style="background: #ffff77"> </td>
<td style="background: #ffff66"> </td>
<td style="background: #ffff55"> </td>
<td style="background: #ffff44"> </td>
<td style="background: #ffff33"> </td>
<td style="background: #ffff22"> </td>
<td style="background: #ffff11"> </td>
<td style="background: #ffff00"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from fuchsia at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: #ee00ee"> </td>
<td style="background: #dd00dd"> </td>
<td style="background: #cc00cc"> </td>
<td style="background: #bb00bb"> </td>
<td style="background: #aa00aa"> </td>
<td style="background: #990099"> </td>
<td style="background: #880088"> </td>
<td style="background: #770077"> </td>
<td style="background: #660066"> </td>
<td style="background: #550055"> </td>
<td style="background: #440044"> </td>
<td style="background: #330033"> </td>
<td style="background: #220022"> </td>
<td style="background: #110011"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: #ee00ee"> </td>
<td style="background: #dd00dd"> </td>
<td style="background: #cc00cc"> </td>
<td style="background: #bb00bb"> </td>
<td style="background: #aa00aa"> </td>
<td style="background: #990099"> </td>
<td style="background: #880088"> </td>
<td style="background: #770077"> </td>
<td style="background: #660066"> </td>
<td style="background: #550055"> </td>
<td style="background: #440044"> </td>
<td style="background: #330033"> </td>
<td style="background: #220022"> </td>
<td style="background: #110011"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: #ee00ee"> </td>
<td style="background: #dd00dd"> </td>
<td style="background: #cc00cc"> </td>
<td style="background: #bb00bb"> </td>
<td style="background: #aa00aa"> </td>
<td style="background: #990099"> </td>
<td style="background: #880088"> </td>
<td style="background: #770077"> </td>
<td style="background: #660066"> </td>
<td style="background: #550055"> </td>
<td style="background: #440044"> </td>
<td style="background: #330033"> </td>
<td style="background: #220022"> </td>
<td style="background: #110011"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: #ee00ee"> </td>
<td style="background: #dd00dd"> </td>
<td style="background: #cc00cc"> </td>
<td style="background: #bb00bb"> </td>
<td style="background: #aa00aa"> </td>
<td style="background: #990099"> </td>
<td style="background: #880088"> </td>
<td style="background: #770077"> </td>
<td style="background: #660066"> </td>
<td style="background: #550055"> </td>
<td style="background: #440044"> </td>
<td style="background: #330033"> </td>
<td style="background: #220022"> </td>
<td style="background: #110011"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from white at the left to fuchsia at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffeeff"> </td>
<td style="background: #ffddff"> </td>
<td style="background: #ffccff"> </td>
<td style="background: #ffbbff"> </td>
<td style="background: #ffaaff"> </td>
<td style="background: #ff99ff"> </td>
<td style="background: #ff88ff"> </td>
<td style="background: #ff77ff"> </td>
<td style="background: #ff66ff"> </td>
<td style="background: #ff55ff"> </td>
<td style="background: #ff44ff"> </td>
<td style="background: #ff33ff"> </td>
<td style="background: #ff22ff"> </td>
<td style="background: #ff11ff"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffeeff"> </td>
<td style="background: #ffddff"> </td>
<td style="background: #ffccff"> </td>
<td style="background: #ffbbff"> </td>
<td style="background: #ffaaff"> </td>
<td style="background: #ff99ff"> </td>
<td style="background: #ff88ff"> </td>
<td style="background: #ff77ff"> </td>
<td style="background: #ff66ff"> </td>
<td style="background: #ff55ff"> </td>
<td style="background: #ff44ff"> </td>
<td style="background: #ff33ff"> </td>
<td style="background: #ff22ff"> </td>
<td style="background: #ff11ff"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffeeff"> </td>
<td style="background: #ffddff"> </td>
<td style="background: #ffccff"> </td>
<td style="background: #ffbbff"> </td>
<td style="background: #ffaaff"> </td>
<td style="background: #ff99ff"> </td>
<td style="background: #ff88ff"> </td>
<td style="background: #ff77ff"> </td>
<td style="background: #ff66ff"> </td>
<td style="background: #ff55ff"> </td>
<td style="background: #ff44ff"> </td>
<td style="background: #ff33ff"> </td>
<td style="background: #ff22ff"> </td>
<td style="background: #ff11ff"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #ffeeff"> </td>
<td style="background: #ffddff"> </td>
<td style="background: #ffccff"> </td>
<td style="background: #ffbbff"> </td>
<td style="background: #ffaaff"> </td>
<td style="background: #ff99ff"> </td>
<td style="background: #ff88ff"> </td>
<td style="background: #ff77ff"> </td>
<td style="background: #ff66ff"> </td>
<td style="background: #ff55ff"> </td>
<td style="background: #ff44ff"> </td>
<td style="background: #ff33ff"> </td>
<td style="background: #ff22ff"> </td>
<td style="background: #ff11ff"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from aqua at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #00ffff"> </td>
<td style="background: #00eeee"> </td>
<td style="background: #00dddd"> </td>
<td style="background: #00cccc"> </td>
<td style="background: #00bbbb"> </td>
<td style="background: #00aaaa"> </td>
<td style="background: #009999"> </td>
<td style="background: #008888"> </td>
<td style="background: #007777"> </td>
<td style="background: #006666"> </td>
<td style="background: #005555"> </td>
<td style="background: #004444"> </td>
<td style="background: #003333"> </td>
<td style="background: #002222"> </td>
<td style="background: #001111"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #00ffff"> </td>
<td style="background: #00eeee"> </td>
<td style="background: #00dddd"> </td>
<td style="background: #00cccc"> </td>
<td style="background: #00bbbb"> </td>
<td style="background: #00aaaa"> </td>
<td style="background: #009999"> </td>
<td style="background: #008888"> </td>
<td style="background: #007777"> </td>
<td style="background: #006666"> </td>
<td style="background: #005555"> </td>
<td style="background: #004444"> </td>
<td style="background: #003333"> </td>
<td style="background: #002222"> </td>
<td style="background: #001111"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #00ffff"> </td>
<td style="background: #00eeee"> </td>
<td style="background: #00dddd"> </td>
<td style="background: #00cccc"> </td>
<td style="background: #00bbbb"> </td>
<td style="background: #00aaaa"> </td>
<td style="background: #009999"> </td>
<td style="background: #008888"> </td>
<td style="background: #007777"> </td>
<td style="background: #006666"> </td>
<td style="background: #005555"> </td>
<td style="background: #004444"> </td>
<td style="background: #003333"> </td>
<td style="background: #002222"> </td>
<td style="background: #001111"> </td>
<td style="background: #000000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #00ffff"> </td>
<td style="background: #00eeee"> </td>
<td style="background: #00dddd"> </td>
<td style="background: #00cccc"> </td>
<td style="background: #00bbbb"> </td>
<td style="background: #00aaaa"> </td>
<td style="background: #009999"> </td>
<td style="background: #008888"> </td>
<td style="background: #007777"> </td>
<td style="background: #006666"> </td>
<td style="background: #005555"> </td>
<td style="background: #004444"> </td>
<td style="background: #003333"> </td>
<td style="background: #002222"> </td>
<td style="background: #001111"> </td>
<td style="background: #000000"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from white at the left to aqua at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeffff"> </td>
<td style="background: #ddffff"> </td>
<td style="background: #ccffff"> </td>
<td style="background: #bbffff"> </td>
<td style="background: #aaffff"> </td>
<td style="background: #99ffff"> </td>
<td style="background: #88ffff"> </td>
<td style="background: #77ffff"> </td>
<td style="background: #66ffff"> </td>
<td style="background: #55ffff"> </td>
<td style="background: #44ffff"> </td>
<td style="background: #33ffff"> </td>
<td style="background: #22ffff"> </td>
<td style="background: #11ffff"> </td>
<td style="background: #00ffff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeffff"> </td>
<td style="background: #ddffff"> </td>
<td style="background: #ccffff"> </td>
<td style="background: #bbffff"> </td>
<td style="background: #aaffff"> </td>
<td style="background: #99ffff"> </td>
<td style="background: #88ffff"> </td>
<td style="background: #77ffff"> </td>
<td style="background: #66ffff"> </td>
<td style="background: #55ffff"> </td>
<td style="background: #44ffff"> </td>
<td style="background: #33ffff"> </td>
<td style="background: #22ffff"> </td>
<td style="background: #11ffff"> </td>
<td style="background: #00ffff"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeffff"> </td>
<td style="background: #ddffff"> </td>
<td style="background: #ccffff"> </td>
<td style="background: #bbffff"> </td>
<td style="background: #aaffff"> </td>
<td style="background: #99ffff"> </td>
<td style="background: #88ffff"> </td>
<td style="background: #77ffff"> </td>
<td style="background: #66ffff"> </td>
<td style="background: #55ffff"> </td>
<td style="background: #44ffff"> </td>
<td style="background: #33ffff"> </td>
<td style="background: #22ffff"> </td>
<td style="background: #11ffff"> </td>
<td style="background: #00ffff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffffff"> </td>
<td style="background: #eeffff"> </td>
<td style="background: #ddffff"> </td>
<td style="background: #ccffff"> </td>
<td style="background: #bbffff"> </td>
<td style="background: #aaffff"> </td>
<td style="background: #99ffff"> </td>
<td style="background: #88ffff"> </td>
<td style="background: #77ffff"> </td>
<td style="background: #66ffff"> </td>
<td style="background: #55ffff"> </td>
<td style="background: #44ffff"> </td>
<td style="background: #33ffff"> </td>
<td style="background: #22ffff"> </td>
<td style="background: #11ffff"> </td>
<td style="background: #00ffff"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from red at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ff0000"> </td>
<td style="background: #ee1100"> </td>
<td style="background: #dd2200"> </td>
<td style="background: #cc3300"> </td>
<td style="background: #bb4400"> </td>
<td style="background: #aa5500"> </td>
<td style="background: #996600"> </td>
<td style="background: #887700"> </td>
<td style="background: #778800"> </td>
<td style="background: #669900"> </td>
<td style="background: #55aa00"> </td>
<td style="background: #44bb00"> </td>
<td style="background: #33cc00"> </td>
<td style="background: #22dd00"> </td>
<td style="background: #11ee00"> </td>
<td style="background: #00ff00"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ff0000"> </td>
<td style="background: #ee1100"> </td>
<td style="background: #dd2200"> </td>
<td style="background: #cc3300"> </td>
<td style="background: #bb4400"> </td>
<td style="background: #aa5500"> </td>
<td style="background: #996600"> </td>
<td style="background: #887700"> </td>
<td style="background: #778800"> </td>
<td style="background: #669900"> </td>
<td style="background: #55aa00"> </td>
<td style="background: #44bb00"> </td>
<td style="background: #33cc00"> </td>
<td style="background: #22dd00"> </td>
<td style="background: #11ee00"> </td>
<td style="background: #00ff00"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ff0000"> </td>
<td style="background: #ee1100"> </td>
<td style="background: #dd2200"> </td>
<td style="background: #cc3300"> </td>
<td style="background: #bb4400"> </td>
<td style="background: #aa5500"> </td>
<td style="background: #996600"> </td>
<td style="background: #887700"> </td>
<td style="background: #778800"> </td>
<td style="background: #669900"> </td>
<td style="background: #55aa00"> </td>
<td style="background: #44bb00"> </td>
<td style="background: #33cc00"> </td>
<td style="background: #22dd00"> </td>
<td style="background: #11ee00"> </td>
<td style="background: #00ff00"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ff0000"> </td>
<td style="background: #ee1100"> </td>
<td style="background: #dd2200"> </td>
<td style="background: #cc3300"> </td>
<td style="background: #bb4400"> </td>
<td style="background: #aa5500"> </td>
<td style="background: #996600"> </td>
<td style="background: #887700"> </td>
<td style="background: #778800"> </td>
<td style="background: #669900"> </td>
<td style="background: #55aa00"> </td>
<td style="background: #44bb00"> </td>
<td style="background: #33cc00"> </td>
<td style="background: #22dd00"> </td>
<td style="background: #11ee00"> </td>
<td style="background: #00ff00"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from green at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #00ff00"> </td>
<td style="background: #00ee11"> </td>
<td style="background: #00dd22"> </td>
<td style="background: #00cc33"> </td>
<td style="background: #00bb44"> </td>
<td style="background: #00aa55"> </td>
<td style="background: #009966"> </td>
<td style="background: #008877"> </td>
<td style="background: #007788"> </td>
<td style="background: #006699"> </td>
<td style="background: #0055aa"> </td>
<td style="background: #0044bb"> </td>
<td style="background: #0033cc"> </td>
<td style="background: #0022dd"> </td>
<td style="background: #0011ee"> </td>
<td style="background: #0000ff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #00ff00"> </td>
<td style="background: #00ee11"> </td>
<td style="background: #00dd22"> </td>
<td style="background: #00cc33"> </td>
<td style="background: #00bb44"> </td>
<td style="background: #00aa55"> </td>
<td style="background: #009966"> </td>
<td style="background: #008877"> </td>
<td style="background: #007788"> </td>
<td style="background: #006699"> </td>
<td style="background: #0055aa"> </td>
<td style="background: #0044bb"> </td>
<td style="background: #0033cc"> </td>
<td style="background: #0022dd"> </td>
<td style="background: #0011ee"> </td>
<td style="background: #0000ff"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #00ff00"> </td>
<td style="background: #00ee11"> </td>
<td style="background: #00dd22"> </td>
<td style="background: #00cc33"> </td>
<td style="background: #00bb44"> </td>
<td style="background: #00aa55"> </td>
<td style="background: #009966"> </td>
<td style="background: #008877"> </td>
<td style="background: #007788"> </td>
<td style="background: #006699"> </td>
<td style="background: #0055aa"> </td>
<td style="background: #0044bb"> </td>
<td style="background: #0033cc"> </td>
<td style="background: #0022dd"> </td>
<td style="background: #0011ee"> </td>
<td style="background: #0000ff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #00ff00"> </td>
<td style="background: #00ee11"> </td>
<td style="background: #00dd22"> </td>
<td style="background: #00cc33"> </td>
<td style="background: #00bb44"> </td>
<td style="background: #00aa55"> </td>
<td style="background: #009966"> </td>
<td style="background: #008877"> </td>
<td style="background: #007788"> </td>
<td style="background: #006699"> </td>
<td style="background: #0055aa"> </td>
<td style="background: #0044bb"> </td>
<td style="background: #0033cc"> </td>
<td style="background: #0022dd"> </td>
<td style="background: #0011ee"> </td>
<td style="background: #0000ff"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #0000ff"> </td>
<td style="background: #1100ee"> </td>
<td style="background: #2200dd"> </td>
<td style="background: #3300cc"> </td>
<td style="background: #4400bb"> </td>
<td style="background: #5500aa"> </td>
<td style="background: #660099"> </td>
<td style="background: #770088"> </td>
<td style="background: #880077"> </td>
<td style="background: #990066"> </td>
<td style="background: #aa0055"> </td>
<td style="background: #bb0044"> </td>
<td style="background: #cc0033"> </td>
<td style="background: #dd0022"> </td>
<td style="background: #ee0011"> </td>
<td style="background: #ff0000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #0000ff"> </td>
<td style="background: #1100ee"> </td>
<td style="background: #2200dd"> </td>
<td style="background: #3300cc"> </td>
<td style="background: #4400bb"> </td>
<td style="background: #5500aa"> </td>
<td style="background: #660099"> </td>
<td style="background: #770088"> </td>
<td style="background: #880077"> </td>
<td style="background: #990066"> </td>
<td style="background: #aa0055"> </td>
<td style="background: #bb0044"> </td>
<td style="background: #cc0033"> </td>
<td style="background: #dd0022"> </td>
<td style="background: #ee0011"> </td>
<td style="background: #ff0000"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #0000ff"> </td>
<td style="background: #1100ee"> </td>
<td style="background: #2200dd"> </td>
<td style="background: #3300cc"> </td>
<td style="background: #4400bb"> </td>
<td style="background: #5500aa"> </td>
<td style="background: #660099"> </td>
<td style="background: #770088"> </td>
<td style="background: #880077"> </td>
<td style="background: #990066"> </td>
<td style="background: #aa0055"> </td>
<td style="background: #bb0044"> </td>
<td style="background: #cc0033"> </td>
<td style="background: #dd0022"> </td>
<td style="background: #ee0011"> </td>
<td style="background: #ff0000"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #0000ff"> </td>
<td style="background: #1100ee"> </td>
<td style="background: #2200dd"> </td>
<td style="background: #3300cc"> </td>
<td style="background: #4400bb"> </td>
<td style="background: #5500aa"> </td>
<td style="background: #660099"> </td>
<td style="background: #770088"> </td>
<td style="background: #880077"> </td>
<td style="background: #990066"> </td>
<td style="background: #aa0055"> </td>
<td style="background: #bb0044"> </td>
<td style="background: #cc0033"> </td>
<td style="background: #dd0022"> </td>
<td style="background: #ee0011"> </td>
<td style="background: #ff0000"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from fuchsia at the left to aqua at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: #ee11ff"> </td>
<td style="background: #dd22ff"> </td>
<td style="background: #cc33ff"> </td>
<td style="background: #bb44ff"> </td>
<td style="background: #aa55ff"> </td>
<td style="background: #9966ff"> </td>
<td style="background: #8877ff"> </td>
<td style="background: #7788ff"> </td>
<td style="background: #6699ff"> </td>
<td style="background: #55aaff"> </td>
<td style="background: #44bbff"> </td>
<td style="background: #33ccff"> </td>
<td style="background: #22ddff"> </td>
<td style="background: #11eeff"> </td>
<td style="background: #00ffff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: #ee11ff"> </td>
<td style="background: #dd22ff"> </td>
<td style="background: #cc33ff"> </td>
<td style="background: #bb44ff"> </td>
<td style="background: #aa55ff"> </td>
<td style="background: #9966ff"> </td>
<td style="background: #8877ff"> </td>
<td style="background: #7788ff"> </td>
<td style="background: #6699ff"> </td>
<td style="background: #55aaff"> </td>
<td style="background: #44bbff"> </td>
<td style="background: #33ccff"> </td>
<td style="background: #22ddff"> </td>
<td style="background: #11eeff"> </td>
<td style="background: #00ffff"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: #ee11ff"> </td>
<td style="background: #dd22ff"> </td>
<td style="background: #cc33ff"> </td>
<td style="background: #bb44ff"> </td>
<td style="background: #aa55ff"> </td>
<td style="background: #9966ff"> </td>
<td style="background: #8877ff"> </td>
<td style="background: #7788ff"> </td>
<td style="background: #6699ff"> </td>
<td style="background: #55aaff"> </td>
<td style="background: #44bbff"> </td>
<td style="background: #33ccff"> </td>
<td style="background: #22ddff"> </td>
<td style="background: #11eeff"> </td>
<td style="background: #00ffff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: #ee11ff"> </td>
<td style="background: #dd22ff"> </td>
<td style="background: #cc33ff"> </td>
<td style="background: #bb44ff"> </td>
<td style="background: #aa55ff"> </td>
<td style="background: #9966ff"> </td>
<td style="background: #8877ff"> </td>
<td style="background: #7788ff"> </td>
<td style="background: #6699ff"> </td>
<td style="background: #55aaff"> </td>
<td style="background: #44bbff"> </td>
<td style="background: #33ccff"> </td>
<td style="background: #22ddff"> </td>
<td style="background: #11eeff"> </td>
<td style="background: #00ffff"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from yellow at the left to fuchsia at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #ffff00"> </td>
<td style="background: #ffee11"> </td>
<td style="background: #ffdd22"> </td>
<td style="background: #ffcc33"> </td>
<td style="background: #ffbb44"> </td>
<td style="background: #ffaa55"> </td>
<td style="background: #ff9966"> </td>
<td style="background: #ff8877"> </td>
<td style="background: #ff7788"> </td>
<td style="background: #ff6699"> </td>
<td style="background: #ff55aa"> </td>
<td style="background: #ff44bb"> </td>
<td style="background: #ff33cc"> </td>
<td style="background: #ff22dd"> </td>
<td style="background: #ff11ee"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffff00"> </td>
<td style="background: #ffee11"> </td>
<td style="background: #ffdd22"> </td>
<td style="background: #ffcc33"> </td>
<td style="background: #ffbb44"> </td>
<td style="background: #ffaa55"> </td>
<td style="background: #ff9966"> </td>
<td style="background: #ff8877"> </td>
<td style="background: #ff7788"> </td>
<td style="background: #ff6699"> </td>
<td style="background: #ff55aa"> </td>
<td style="background: #ff44bb"> </td>
<td style="background: #ff33cc"> </td>
<td style="background: #ff22dd"> </td>
<td style="background: #ff11ee"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #ffff00"> </td>
<td style="background: #ffee11"> </td>
<td style="background: #ffdd22"> </td>
<td style="background: #ffcc33"> </td>
<td style="background: #ffbb44"> </td>
<td style="background: #ffaa55"> </td>
<td style="background: #ff9966"> </td>
<td style="background: #ff8877"> </td>
<td style="background: #ff7788"> </td>
<td style="background: #ff6699"> </td>
<td style="background: #ff55aa"> </td>
<td style="background: #ff44bb"> </td>
<td style="background: #ff33cc"> </td>
<td style="background: #ff22dd"> </td>
<td style="background: #ff11ee"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #ffff00"> </td>
<td style="background: #ffee11"> </td>
<td style="background: #ffdd22"> </td>
<td style="background: #ffcc33"> </td>
<td style="background: #ffbb44"> </td>
<td style="background: #ffaa55"> </td>
<td style="background: #ff9966"> </td>
<td style="background: #ff8877"> </td>
<td style="background: #ff7788"> </td>
<td style="background: #ff6699"> </td>
<td style="background: #ff55aa"> </td>
<td style="background: #ff44bb"> </td>
<td style="background: #ff33cc"> </td>
<td style="background: #ff22dd"> </td>
<td style="background: #ff11ee"> </td>
<td style="background: #ff00ff"> </td>
<td style="background: black"> </td>
</tr>
</table>
<p>The following table should have four matching rows gradually changing from aqua at the left to yellow at the right (plus a checkerboard at both ends to show where the rows are):</p>
<table border="border">
<tr>
<td style="background: black"> </td>
<td style="background: #00ffff"> </td>
<td style="background: #11ffee"> </td>
<td style="background: #22ffdd"> </td>
<td style="background: #33ffcc"> </td>
<td style="background: #44ffbb"> </td>
<td style="background: #55ffaa"> </td>
<td style="background: #66ff99"> </td>
<td style="background: #77ff88"> </td>
<td style="background: #88ff77"> </td>
<td style="background: #99ff66"> </td>
<td style="background: #aaff55"> </td>
<td style="background: #bbff44"> </td>
<td style="background: #ccff33"> </td>
<td style="background: #ddff22"> </td>
<td style="background: #eeff11"> </td>
<td style="background: #ffff00"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #00ffff"> </td>
<td style="background: #11ffee"> </td>
<td style="background: #22ffdd"> </td>
<td style="background: #33ffcc"> </td>
<td style="background: #44ffbb"> </td>
<td style="background: #55ffaa"> </td>
<td style="background: #66ff99"> </td>
<td style="background: #77ff88"> </td>
<td style="background: #88ff77"> </td>
<td style="background: #99ff66"> </td>
<td style="background: #aaff55"> </td>
<td style="background: #bbff44"> </td>
<td style="background: #ccff33"> </td>
<td style="background: #ddff22"> </td>
<td style="background: #eeff11"> </td>
<td style="background: #ffff00"> </td>
<td style="background: black"> </td>
</tr>
<tr>
<td style="background: black"> </td>
<td style="background: #00ffff"> </td>
<td style="background: #11ffee"> </td>
<td style="background: #22ffdd"> </td>
<td style="background: #33ffcc"> </td>
<td style="background: #44ffbb"> </td>
<td style="background: #55ffaa"> </td>
<td style="background: #66ff99"> </td>
<td style="background: #77ff88"> </td>
<td style="background: #88ff77"> </td>
<td style="background: #99ff66"> </td>
<td style="background: #aaff55"> </td>
<td style="background: #bbff44"> </td>
<td style="background: #ccff33"> </td>
<td style="background: #ddff22"> </td>
<td style="background: #eeff11"> </td>
<td style="background: #ffff00"> </td>
<td style="background: white"> </td>
</tr>
<tr>
<td style="background: white"> </td>
<td style="background: #00ffff"> </td>
<td style="background: #11ffee"> </td>
<td style="background: #22ffdd"> </td>
<td style="background: #33ffcc"> </td>
<td style="background: #44ffbb"> </td>
<td style="background: #55ffaa"> </td>
<td style="background: #66ff99"> </td>
<td style="background: #77ff88"> </td>
<td style="background: #88ff77"> </td>
<td style="background: #99ff66"> </td>
<td style="background: #aaff55"> </td>
<td style="background: #bbff44"> </td>
<td style="background: #ccff33"> </td>
<td style="background: #ddff22"> </td>
<td style="background: #eeff11"> </td>
<td style="background: #ffff00"> </td>
<td style="background: black"> </td>
</tr>
</table>
</body>