Here's the markup in today's world. In creating this inline-style version, I spent almost an hour in figuring out which styles applied to which cells, and then doing find-and-replace operations to get the desired results, and then correcting for the mistakes I made during this process. Because of my extreme familiarity with the markup and the styles, I was able to avoid making more than a few mistakes. Picture trying to carry out this process without that kind of familiarity.
In order to keep the result as small as possible, I stripped out all of the class attributes and their values, as they were more or less useless for the presentation of the document. Structurally speaking, I reduced the chart from a structured ranking to a soup of indistinguishable table cells. Had I left in the classes, the result would have been at least 10% larger than it already is, pushing the size close to 10Kb. I also reduced hexadecimal color values from the six-digit to the three-digit notation where possible, which was almost everywhere. Had I not used colors which could be reduced in this manner, the size of the markup would have increased still further.
Number of characters in the following example: 8344 (includes markup, content, and whitespace)
<table cellpadding="1" cellspacing="0" border="0"> <tr style="background-color: #999;"> <th rowspan="2" colspan="2"><big>Property</big><br/>or Value</th> <td width="3" style="background-color: black;"> </td> <th colspan="8">Windows95/98/NT</th> <td width="3" style="background-color: black;"> </td> <th colspan="5">Macintosh</th> <td width="3" style="background-color: black;"> </td> <td style="background-color: white;"> </td> </tr> <tr style="font-size: smaller; background-color: #CCC;"> <td style="background-color: black;"> </td> <th> Nav4 </th> <th> Nav6 </th> <th> IE3 </th> <th> IE4 </th> <th> IE5 </th> <th> IE55 </th> <th> Op3 </th> <th> Op4 </th> <td style="background-color: black;"> </td> <th> Nav4 </th> <th> Nav6 </th> <th> IE3 </th> <th> IE4 </th> <th> IE5 </th> <td style="background-color: black;"> </td> <td style="background-color: white;"> </td> </tr> <tr style="background-color: #FFC;"> <td style="border-top: 1px solid black; border-bottom: 1px solid gray; font-weight: bold; text-align: right;">5.6.1 </td> <td style="border-top: 1px solid black; border-bottom: 1px solid gray; font-weight: bold;"><a href="glossary.html#561">display</a></td> <td style="background-color: black; border-top: 1px solid black;"> </td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: #960;">P</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: green;">Y</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: orange;">N</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: #960;">P</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: #960;">P</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: #960;">P</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: #960;">P</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: green;">Y</td> <td style="background-color: black;"> </td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: #960;">P</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: green;">Y</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: orange;">N</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: #960;">P</td> <td style="border-top: 1px solid black; font-weight: bold; text-align: center; background-color: #FFC; color: green;">Y</td> <td style="background-color: black;"> </td> </tr> <tr> <td></td> <td>block</td> <td style="background-color: black;"> </td> <td style="font-weight: bold; text-align: center; background-color: red;">B</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="background-color: black;"> </td> <td style="font-weight: bold; text-align: center; background-color: red;">B</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: yellow;">P</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="background-color: black;"> </td> </tr> <tr> <td></td> <td>inline</td> <td style="background-color: black;"> </td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: red;">B</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="background-color: black;"> </td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="background-color: black;"> </td> <td style="border: 1px solid black; font-size: 10pt; background-color: silver;">[<a href="notes.html#561inline">note</a>]</td></tr> <tr> <td></td> <td>list-item</td> <td style="background-color: black;"> </td> <td style="font-weight: bold; text-align: center; background-color: red;">B</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="background-color: black;"> </td> <td style="font-weight: bold; text-align: center; background-color: yellow;">P</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: yellow;">P</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="background-color: black;"> </td> </tr> <tr> <td></td> <td>none</td> <td style="background-color: black;"> </td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="background-color: black;"> </td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: orange;">N</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="font-weight: bold; text-align: center; background-color: green;">Y</td> <td style="background-color: black;"> </td> </tr> </table>