Source code

Revision control

Copy as Markdown

Other Tools

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference</title>
<style>
html, body { background: #dddddd; color: #000000; }
table { border-spacing: 0; padding: 0; border: none; }
td { border: none; padding: 0; }
</style>
<body>
<p>Each row in the following table (except the first and last, to show where the columns are) should have two cells with the same background color. None of them should match the background of the page.</p>
<table>
<tr><td style="background: black">&nbsp;&nbsp;&nbsp;</td><td style="background: white">&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td style="background: #f0f8ff" colspan=2>&nbsp;</td>
<tr><td style="background: #faebd7" colspan=2>&nbsp;</td>
<tr><td style="background: #00ffff" colspan=2>&nbsp;</td>
<tr><td style="background: #7fffd4" colspan=2>&nbsp;</td>
<tr><td style="background: #f0ffff" colspan=2>&nbsp;</td>
<tr><td style="background: #f5f5dc" colspan=2>&nbsp;</td>
<tr><td style="background: #ffe4c4" colspan=2>&nbsp;</td>
<tr><td style="background: #000000" colspan=2>&nbsp;</td>
<tr><td style="background: #ffebcd" colspan=2>&nbsp;</td>
<tr><td style="background: #0000ff" colspan=2>&nbsp;</td>
<tr><td style="background: #8a2be2" colspan=2>&nbsp;</td>
<tr><td style="background: #a52a2a" colspan=2>&nbsp;</td>
<tr><td style="background: #deb887" colspan=2>&nbsp;</td>
<tr><td style="background: #5f9ea0" colspan=2>&nbsp;</td>
<tr><td style="background: #7fff00" colspan=2>&nbsp;</td>
<tr><td style="background: #d2691e" colspan=2>&nbsp;</td>
<tr><td style="background: #ff7f50" colspan=2>&nbsp;</td>
<tr><td style="background: #6495ed" colspan=2>&nbsp;</td>
<tr><td style="background: #fff8dc" colspan=2>&nbsp;</td>
<tr><td style="background: #dc143c" colspan=2>&nbsp;</td>
<tr><td style="background: #00ffff" colspan=2>&nbsp;</td>
<tr><td style="background: #00008b" colspan=2>&nbsp;</td>
<tr><td style="background: #008b8b" colspan=2>&nbsp;</td>
<tr><td style="background: #b8860b" colspan=2>&nbsp;</td>
<tr><td style="background: #a9a9a9" colspan=2>&nbsp;</td>
<tr><td style="background: #006400" colspan=2>&nbsp;</td>
<tr><td style="background: #a9a9a9" colspan=2>&nbsp;</td>
<tr><td style="background: #bdb76b" colspan=2>&nbsp;</td>
<tr><td style="background: #8b008b" colspan=2>&nbsp;</td>
<tr><td style="background: #556b2f" colspan=2>&nbsp;</td>
<tr><td style="background: #ff8c00" colspan=2>&nbsp;</td>
<tr><td style="background: #9932cc" colspan=2>&nbsp;</td>
<tr><td style="background: #8b0000" colspan=2>&nbsp;</td>
<tr><td style="background: #e9967a" colspan=2>&nbsp;</td>
<tr><td style="background: #8fbc8f" colspan=2>&nbsp;</td>
<tr><td style="background: #483d8b" colspan=2>&nbsp;</td>
<tr><td style="background: #2f4f4f" colspan=2>&nbsp;</td>
<tr><td style="background: #2f4f4f" colspan=2>&nbsp;</td>
<tr><td style="background: #00ced1" colspan=2>&nbsp;</td>
<tr><td style="background: #9400d3" colspan=2>&nbsp;</td>
<tr><td style="background: #ff1493" colspan=2>&nbsp;</td>
<tr><td style="background: #00bfff" colspan=2>&nbsp;</td>
<tr><td style="background: #696969" colspan=2>&nbsp;</td>
<tr><td style="background: #696969" colspan=2>&nbsp;</td>
<tr><td style="background: #1e90ff" colspan=2>&nbsp;</td>
<tr><td style="background: #b22222" colspan=2>&nbsp;</td>
<tr><td style="background: #fffaf0" colspan=2>&nbsp;</td>
<tr><td style="background: #228b22" colspan=2>&nbsp;</td>
<tr><td style="background: #ff00ff" colspan=2>&nbsp;</td>
<tr><td style="background: #dcdcdc" colspan=2>&nbsp;</td>
<tr><td style="background: #f8f8ff" colspan=2>&nbsp;</td>
<tr><td style="background: #ffd700" colspan=2>&nbsp;</td>
<tr><td style="background: #daa520" colspan=2>&nbsp;</td>
<tr><td style="background: #808080" colspan=2>&nbsp;</td>
<tr><td style="background: #008000" colspan=2>&nbsp;</td>
<tr><td style="background: #adff2f" colspan=2>&nbsp;</td>
<tr><td style="background: #808080" colspan=2>&nbsp;</td>
<tr><td style="background: #f0fff0" colspan=2>&nbsp;</td>
<tr><td style="background: #ff69b4" colspan=2>&nbsp;</td>
<tr><td style="background: #cd5c5c" colspan=2>&nbsp;</td>
<tr><td style="background: #4b0082" colspan=2>&nbsp;</td>
<tr><td style="background: #fffff0" colspan=2>&nbsp;</td>
<tr><td style="background: #f0e68c" colspan=2>&nbsp;</td>
<tr><td style="background: #e6e6fa" colspan=2>&nbsp;</td>
<tr><td style="background: #fff0f5" colspan=2>&nbsp;</td>
<tr><td style="background: #7cfc00" colspan=2>&nbsp;</td>
<tr><td style="background: #fffacd" colspan=2>&nbsp;</td>
<tr><td style="background: #add8e6" colspan=2>&nbsp;</td>
<tr><td style="background: #f08080" colspan=2>&nbsp;</td>
<tr><td style="background: #e0ffff" colspan=2>&nbsp;</td>
<tr><td style="background: #fafad2" colspan=2>&nbsp;</td>
<tr><td style="background: #d3d3d3" colspan=2>&nbsp;</td>
<tr><td style="background: #90ee90" colspan=2>&nbsp;</td>
<tr><td style="background: #d3d3d3" colspan=2>&nbsp;</td>
<tr><td style="background: #ffb6c1" colspan=2>&nbsp;</td>
<tr><td style="background: #ffa07a" colspan=2>&nbsp;</td>
<tr><td style="background: #20b2aa" colspan=2>&nbsp;</td>
<tr><td style="background: #87cefa" colspan=2>&nbsp;</td>
<tr><td style="background: #778899" colspan=2>&nbsp;</td>
<tr><td style="background: #778899" colspan=2>&nbsp;</td>
<tr><td style="background: #b0c4de" colspan=2>&nbsp;</td>
<tr><td style="background: #ffffe0" colspan=2>&nbsp;</td>
<tr><td style="background: #00ff00" colspan=2>&nbsp;</td>
<tr><td style="background: #32cd32" colspan=2>&nbsp;</td>
<tr><td style="background: #faf0e6" colspan=2>&nbsp;</td>
<tr><td style="background: #ff00ff" colspan=2>&nbsp;</td>
<tr><td style="background: #800000" colspan=2>&nbsp;</td>
<tr><td style="background: #66cdaa" colspan=2>&nbsp;</td>
<tr><td style="background: #0000cd" colspan=2>&nbsp;</td>
<tr><td style="background: #ba55d3" colspan=2>&nbsp;</td>
<tr><td style="background: #9370db" colspan=2>&nbsp;</td>
<tr><td style="background: #3cb371" colspan=2>&nbsp;</td>
<tr><td style="background: #7b68ee" colspan=2>&nbsp;</td>
<tr><td style="background: #00fa9a" colspan=2>&nbsp;</td>
<tr><td style="background: #48d1cc" colspan=2>&nbsp;</td>
<tr><td style="background: #c71585" colspan=2>&nbsp;</td>
<tr><td style="background: #191970" colspan=2>&nbsp;</td>
<tr><td style="background: #f5fffa" colspan=2>&nbsp;</td>
<tr><td style="background: #ffe4e1" colspan=2>&nbsp;</td>
<tr><td style="background: #ffe4b5" colspan=2>&nbsp;</td>
<tr><td style="background: #ffdead" colspan=2>&nbsp;</td>
<tr><td style="background: #000080" colspan=2>&nbsp;</td>
<tr><td style="background: #fdf5e6" colspan=2>&nbsp;</td>
<tr><td style="background: #808000" colspan=2>&nbsp;</td>
<tr><td style="background: #6b8e23" colspan=2>&nbsp;</td>
<tr><td style="background: #ffa500" colspan=2>&nbsp;</td>
<tr><td style="background: #ff4500" colspan=2>&nbsp;</td>
<tr><td style="background: #da70d6" colspan=2>&nbsp;</td>
<tr><td style="background: #eee8aa" colspan=2>&nbsp;</td>
<tr><td style="background: #98fb98" colspan=2>&nbsp;</td>
<tr><td style="background: #afeeee" colspan=2>&nbsp;</td>
<tr><td style="background: #db7093" colspan=2>&nbsp;</td>
<tr><td style="background: #ffefd5" colspan=2>&nbsp;</td>
<tr><td style="background: #ffdab9" colspan=2>&nbsp;</td>
<tr><td style="background: #cd853f" colspan=2>&nbsp;</td>
<tr><td style="background: #ffc0cb" colspan=2>&nbsp;</td>
<tr><td style="background: #dda0dd" colspan=2>&nbsp;</td>
<tr><td style="background: #b0e0e6" colspan=2>&nbsp;</td>
<tr><td style="background: #800080" colspan=2>&nbsp;</td>
<tr><td style="background: #ff0000" colspan=2>&nbsp;</td>
<tr><td style="background: #bc8f8f" colspan=2>&nbsp;</td>
<tr><td style="background: #4169e1" colspan=2>&nbsp;</td>
<tr><td style="background: #8b4513" colspan=2>&nbsp;</td>
<tr><td style="background: #fa8072" colspan=2>&nbsp;</td>
<tr><td style="background: #f4a460" colspan=2>&nbsp;</td>
<tr><td style="background: #2e8b57" colspan=2>&nbsp;</td>
<tr><td style="background: #fff5ee" colspan=2>&nbsp;</td>
<tr><td style="background: #a0522d" colspan=2>&nbsp;</td>
<tr><td style="background: #c0c0c0" colspan=2>&nbsp;</td>
<tr><td style="background: #87ceeb" colspan=2>&nbsp;</td>
<tr><td style="background: #6a5acd" colspan=2>&nbsp;</td>
<tr><td style="background: #708090" colspan=2>&nbsp;</td>
<tr><td style="background: #708090" colspan=2>&nbsp;</td>
<tr><td style="background: #fffafa" colspan=2>&nbsp;</td>
<tr><td style="background: #00ff7f" colspan=2>&nbsp;</td>
<tr><td style="background: #4682b4" colspan=2>&nbsp;</td>
<tr><td style="background: #d2b48c" colspan=2>&nbsp;</td>
<tr><td style="background: #008080" colspan=2>&nbsp;</td>
<tr><td style="background: #d8bfd8" colspan=2>&nbsp;</td>
<tr><td style="background: #ff6347" colspan=2>&nbsp;</td>
<tr><td style="background: #40e0d0" colspan=2>&nbsp;</td>
<tr><td style="background: #ee82ee" colspan=2>&nbsp;</td>
<tr><td style="background: #f5deb3" colspan=2>&nbsp;</td>
<tr><td style="background: #ffffff" colspan=2>&nbsp;</td>
<tr><td style="background: #f5f5f5" colspan=2>&nbsp;</td>
<tr><td style="background: #ffff00" colspan=2>&nbsp;</td>
<tr><td style="background: #9acd32" colspan=2>&nbsp;</td>
<tr><td style="background: white">&nbsp;&nbsp;&nbsp;</td><td style="background: black">&nbsp;&nbsp;&nbsp;</td></tr>
</table>
</body>