Here’s why I like CSS.
Here’s a table created in Microsoft Word and pasted into a CMS:
<table border="1" cellspacing="0" cellpadding="0" class="MsoNormalTable" style="border-collapse: collapse; border: medium none"><tbody><tr><td width="64" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: windowtext 2.25pt solid; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; border-left: #f0f0f0; width: 47.65pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"><strong><span style="color: white; font-family: 'Calibri','sans-serif'"><font size="2"> </font></span></strong></td><td width="170" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: windowtext 2.25pt solid; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; border-left: #f0f0f0; width: 127.85pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"><strong><span style="color: white; font-family: 'Calibri','sans-serif'"><font size="2">Description</font></span></strong><strong><span style="color: white; font-family: 'Calibri','sans-serif'"><font size="2"> </font></span></strong></td><td width="335" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: windowtext 2.25pt solid; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; border-left: #f0f0f0; width: 250.95pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"><strong><span style="color: white; font-family: 'Calibri','sans-serif'"><font size="2"> </font></span></strong></td></tr><tr style="height: 36.85pt; page-break-inside: avoid"><td rowspan="7" width="64" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; width: 47.65pt; padding-top: 0cm; height: 36.85pt; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><strong><span style="color: white; font-family: 'Calibri','sans-serif'"><font size="2">Benefits</font></span></strong></td><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; height: 36.85pt; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><span style="font-family: 'Calibri','sans-serif'"><font size="2">Low Total Cost of Ownership (TCO)</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; height: 36.85pt; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">No up-front hardware or software costs</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Significantly less work effort to set-up a B2B integration solution since it involves mostly configuration tasks rather than programming</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Free use of online development interface for developers </span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Data processing rates for usage are world’s best</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><span style="font-family: 'Calibri','sans-serif'"><font size="2">Best Return on Investment (ROI)</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">ROI achieved sooner due to low up-front and on-going costs </span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Optimizes work effort since tasks removed or simplified</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Higher ROI due to removal of costs</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><span style="font-family: 'Calibri','sans-serif'"><font size="2">Speed of Delivery</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Solutions delivered in days and weeks rather than months and years</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">No requirement to establish and maintain hardware and software</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Support for standards reduces need for specialists and training</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><span style="font-family: 'Calibri','sans-serif'"><font size="2">Control and Flexibility</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Developers have full control over tenancies, design data and administration</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Development can be done anywhere at anytime</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><span style="font-family: 'Calibri','sans-serif'"><font size="2">Guaranteed Service </font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Secure and reliable infrastructure </span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Guaranteed service level</span></p><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Data-back-up and disaster recovery provided </span></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><span style="font-family: 'Calibri','sans-serif'"><font size="2">Market Leading Service</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Most advanced functionality</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">First remotely configurable Integration, BPM and BI service</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Wide support for industry standards and customizations</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><span style="font-family: 'Calibri','sans-serif'"><font size="2">Future Proof</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Quarterly releases ensure up-to-date functionality </span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Upgrades are our responsibility</span></p></td></tr><tr><td width="64" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: #f0f0f0; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; border-left: #f0f0f0; width: 47.65pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"><strong><span style="color: white; font-family: 'Calibri','sans-serif'"><font size="2"> </font></span></strong></td><td width="170" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: #f0f0f0; padding-left: 5.4pt; padding-bottom: 0cm; border-left: #f0f0f0; width: 127.85pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; background-color: transparent"><span style="font-family: 'Calibri','sans-serif'"><font size="2">Expert Assistance</font></span></td><td width="335" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: #f0f0f0; padding-left: 5.4pt; padding-bottom: 0cm; border-left: #f0f0f0; width: 250.95pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; background-color: transparent"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: 'Calibri','sans-serif'">Expertise and knowledge available for support, development, consulting and training</span></p></td></tr></tbody></table>
With a little CSS coding (held in an external file), it has become this:
<table class="featuretable">
<tbody>
<tr>
<td class="ftop"></td>
<td class="ftop">Description</td>
<td class="ftop"></td>
</tr>
<tr>
<td class="fside">Benefits</td>
<td class="fd0">Low Total Cost of Ownership (TCO)</td>
<td class="fd0">No up-front hardware or software
costs<br>
Significantly less work effort to set-up a B2B integration solution
since it involves mostly configuration tasks rather than programming<br>
Free use of online development interface for developers <br>
Data processing rates for usage are world’s best</td>
</tr>
<tr>
<td class="fside"></td>
<td class="fd1">Best Return on Investment (ROI)</td>
<td class="fd1">ROI achieved sooner due to low
up-front and on-going costs<br>
Optimizes work effort since tasks removed or simplified<br>
Higher ROI due to removal of costs</td>
</tr>
<tr>
<td class="fside"></td>
<td class="fd0">Speed of Delivery</td>
<td class="fd0">Solutions delivered in days and
weeks rather than months and years<br>
No requirement to establish and maintain hardware and software<br>
Support for standards reduces need for specialists and training</td>
</tr>
<tr>
<td class="fside"></td>
<td class="fd1">Control and Flexibility</td>
<td class="fd1">Developers have full control over
tenancies, design data and administration<br>
Development can be done anywhere at anytime</td>
</tr>
<tr>
<td class="fside"></td>
<td class="fd0">Guaranteed Service</td>
<td class="fd0">Secure and reliable infrastructure<br>
Guaranteed service level<br>
Data-back-up and disaster recovery provided</td>
</tr>
<tr>
<td class="fside"></td>
<td class="fd1">Market Leading Service</td>
<td class="fd1">Most advanced functionality<br>
First remotely configurable Integration, BPM and BI service<br>
Wide support for industry standards and customizations</td>
</tr>
<tr>
<td class="fside"></td>
<td class="fd0">Future Proof</td>
<td class="fd0">Quarterly releases ensure up-to-date
functionality<br>
Upgrades are our responsibility</td>
</tr>
<tr>
<td class="fside"></td>
<td class="fd0">Expert Assistance</td>
<td class="fd0">Expertise and knowledge available
for support, development, consulting and training</td>
</tr>
</tbody>
</table>
Old version: 12250 bytes.
New version: 2490 bytes + 605 bytes of CSS. And much more maintainable, and it’ll be easier to change the table styles later.
OK, the new looks slightly different to the old (this was on purpose to enlarge the fonts a bit), but jeez.


How is it that otherwise competent people still don’t know how to use style sheets in Word? How long’s Word had styles? Well over a decade.
Anybody who lives outside the US will know that Microsoft Word does evil things, with little bits of text changing unaccountably into US English at seemingly random times. Suddenly a perfectly spelt word like… well, spelt could be a contender actually, will get that curly red line underneath it.


I can’t tell you how much I hate Windows’ overtype mode. Accidentally tap the Insert key, and you suddenly find your typing overwriting old text. Who would use such a pointless thing?
I don’t like Word’s change tracking. Never have. I suppose it’s useful in some circumstances, but almost every document I’ve come across that had it turned on proved it to be a symptom of self-importance on the part of the author.
Dumb things in Word 2003 that they should have fixed 3 versions ago, number 473: Not being able to get into the Options when you don’t have an open document.