Styling Excel cells with mso-number-format CSS attribute
1 min readJan 28, 2020
If you need to create a Microsoft Excel spreadsheet, it is very easy to create an HTML with a <table> styled using the mso-number-format CSS attribute.
I compiled these some time ago. Below there’s an example HTML showing how to use these classes and an image with the output.
Example HTML content
Save the following content as myfile.xls :
<html>
<head>
<style>
td.three-decimals {mso-number-format: "0\.000"}
td.thousands-separator {mso-number-format: "\#\,\#\#0\.000"}
td.fractions {mso-number-format: "#\ ???/???"}
td.negative-red {mso-number-format: "#,##0.00_ ;[Red]-#,##0.00\ " }
</style>
</head>
<body>
<table>
<tr>
<td>3 decimals</td>
<td class="three-decimals">3.45</td>
</tr>
<tr>
<td>+Thousands sep</td>
<td class="thousands-separator">4560</td>
</tr>
<tr>
<td>Fraction</td>
<td class="fractions">0.125</td>
</tr>
<tr>
<td>Negatives red</td>
<td class="negative-red">-5</td>
</tr>
<tr>
<td>Negatives red</td>
<td class="negative-red">5000</td>
</tr>
</table>
</body>
</html>When you open the myfile.xls (in whatever version of MS Excel) you should see the cells formatted as intented. See the image below.
Notice how cool that the value 0.125 has been converted to its fractional representation!
Comments, questions?
