Tab space instead of multiple non-breaking spaces ("nbsp")?

Question

Is it possible to insert a tab character in HTML instead of having to type four times?

user_1271898 · Answer

is the answer.

However, they won't be as functional as you might expect if you are used to using horizontal tabulations in word-processors e.g. Word, Wordperfect, Open Office, Wordworth, etc. They are fixed width, and they cannot be customised.

CSS gives you far greater control and provides an alternative until the W3C provide an official solution.

Example:

padding-left:4em

..or..

margin-left:4em

..as appropriate

It depends on which character set you want to use.

You could set up some tab tags and use them similar to how you would use h tags.

...and use them like so:




    
        
        Tabulation example

        

    

    
        Non tabulated text

        Tabulated text
        Tabulated text
        Tabulated text
        Tabulated text
        Tabulated text
        Tabulated text
        Tabulated text
        Tabulated text
        Non tabulated text
        Tabulated text
        Tabulated text
        Tabulated text
        Tabulated text
        Tabulated text

Run the snippet above to see a visual example.

Extra discussion

There are no horizontal tabulation entities defined in ISO-8859-1 HTML, however there are some other white-space characters available than the usual , for example; , and the aforementioned .

It's also worth mentioning that in ASCII and Unicode, is a horizontal tabulation.

user_1359002 · Answer

Below are the 3 different ways provided by HTML to insert empty space

Type to add a single space.
Type to add 2 spaces.
Type to add 4 spaces.

user_608741 · Answer

If you needed only one tab, the following worked for me.

with the HTML something like:

asdf 99967
hjkl 88868

You can add more "tabs" by adding additional "tab" styles and changing the HTML such as:

with the HTML something like:

asdf 99967hear
hjkl 88868here

user_6578723 · Answer

There is a simple css for it:

white-space: pre;

It keeps the spaces that you add in the HTML rather than unifying them.

user_9331130 · Answer

Instead of writing four time for space equal to tab, you can write once.

user_4974715 · Answer

The ideal CSS code that should be used should be a combination of "display" and "min-width" properties...

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.

user_7381360 · Answer

If you want the TABs

work like tabulators, even in contenteditables
don't want to use the ugly "pre" fonts

then use instead of nbsp's:

Place this in in your CSS:

.TAB {
margin:0; padding:0;
display:inline;
tab-size: 8;
}

Change the tab-size to your needs.

user_6714430 · Answer

we use custom space span class

Include space class in CSS.

.space 
{
   margin-left:45px;
}

user_4360841 · Answer

The   unit is font size dependent. To understand that dependency, consider em and rem units of measure, using this CSS/HTML method.

CSS

.tab { margin-left: 1rem; }

HTML

 ...p and h elements...

DISPLAY

1em approximately equals 4 but em unit and   rem unit display depend on element and style use, indenting something like this.

--------h1 indented 1em
--p indented 1em
----h1 indented 1rem
----p indented 1rem

Both margin-left and padding-left work. There is no tab unit of length in HTML or CSS. A .tab class selector can be used.

user_2652785 · Answer

p { background-color: #FFEEEE; margin: 0; padding: 0.5em 0; }

	← One tab		← two tabs			← three tabs				← four tabs.
  ← This one is one character.
	← This one has come out too far.
	← Say! what a lot of tabs there are.

TL;DR (Too lazy; didn't 'Run code'):

Insert tab character in your text by entering , or (if you're sure your document is UTF-8 encoded) just hit your tab key!
Add white-space: pre-wrap; to your text element's CSS rule, to stop whitespace characters (including tabs) from collapsing.
Add tab-size: 4; to your text element's CSS rule, to ensure that your tab width is equal to four standard space characters.

(There were snippets and clues about each of these things sprinkled throughout the many answers and comments, but none that brought them all together to answer the question as it was worded.)

Edit: Unfortunately, the Stack Snippet converted my Unicode tab character to spaces! So that part of the demo (line 2) isn't working. You may encounter similar issues if running your code through a code formatter. avoids such issues.

Tab space instead of multiple non-breaking spaces ("nbsp")?

37 Answers