Styling Excel cells with mso-number-format CSS attribute
An Rodriguez

An Rodriguez @anrodriguez

About: Fundamental physicist, artist, devops. Pythagorizing reality ...

Location:
NYC
Joined:
Jan 3, 2020

Styling Excel cells with mso-number-format CSS attribute

Publish Date: Feb 2 '20
18 1

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.

Attribute Description
mso-number-format:"0" NO Decimals
mso-number-format:"0.000" 3 Decimals
mso-number-format:"#\,##0.000" Comma with 3 dec
mso-number-format:"mm\/dd\/yy" Date7
mso-number-format:"mmmm\ d\,\ yyyy" Date9
mso-number-format:"m\/d\/yy\ h:mm\ AM\/PM" D -T AMPM
mso-number-format:"Short Date" 01/03/1998
mso-number-format:"Medium Date" 01-mar-98
mso-number-format:"d-mmm-yyyy" 01-mar-1998
mso-number-format:"Short Time" 5:16
mso-number-format:"Medium Time" 5:16 am
mso-number-format:"Long Time" 5:16:21:00
mso-number-format:"Percent" Percent - two decimals
mso-number-format:"0%" Percent - no decimals
mso-number-format:"0.E+00" Scientific Notation
mso-number-format:"\@" Text
mso-number-format:"#\ ???\/???" Fractions - up to 3 digits (312/943)
mso-number-format:"\0022£\0022#\,##0.00" £12.76
mso-number-format:"#\,##0.00_ \;[Red]-#\,##0.00\ " 2 decimals, negative numbers in red and signed (1.56 -1.56)

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>
Enter fullscreen mode Exit fullscreen mode

When you open the myfile.xls (in whatever version of MS Excel) you should see the cells formatted as intended. See the image below.

Notice how cool that the value 0.125 has been converted to its fractional representation!

Alt Cells are being formatted with the  raw `mso-number-format` endraw  CSS attribute

Cells are being formatted with the `mso-number-format` CSS attribute

Do you have comments or suggestions?

Comments 1 total

  • Sergei Sarkisian
    Sergei SarkisianDec 16, 2021

    Thank you, that's the information I was looking for 😊

Add comment