Showing white space ‘as-is’ in HTML

A common gripe about HTML rendering is that white spaces are not preserved.

For e.g. giving

<table><tr><td>This is       a                       test</td></tr></table>

will end up being shown as ‘This is a test’.

To show the spaces, people generally convert spaces to & nbsp;

to preserve the spaces. Instead, a CSS property ‘white-space’ can be used.

For e.g. to preserve the spaces, do this:

<table><tr><td style = "white-space:PRE">This is       a                       test</td></tr></table>

This will display preserve the white spaces and show

'This is            a                        test'

on the browser. We need to include a !DOCTYPE to make use of ‘white-space:pre’ property on IE.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: