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.
Just out of curiosity: does it still look right in Word? (In case you are wondering who in the world would wish to display an HTML table in Word: Outlook uses Word rendering engine instead of IE’s and is totally messing up emails my application sends.)