Tab character 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?

I find it helpfull to use
when using tab mulple time in the begining of the line (for instence when qouting C code) — Guy Kovel, Oct 02 '13 at 12:36
you can define your own tag ``, then use **jQuery** on `ready` function to replace or pad them with desired number of equivalent spaces. — Khaled.K, Nov 11 '15 at 10:43
If you really need tabs, give a try to [`white-space`](https://developer.mozilla.org/en/docs/Web/CSS/white-space) — Buksy, Jun 08 '16 at 06:58
FYI - If a static 4x` ` (or a single ` `) is not cutting it and you want them to line up to the next "4 spaced" column, as a tab might do, (which would mean sometimes its actually 0 or 1 or 2 or 3 spaces to line up)..like for instance.. in say, some text editors.. Unfortunately, You can't in HTML... without ``s... and also, using some amount of spaces to try to hack it... will require a fixed font.... I think most of the issues lie between the need for a fixed font and that HTML loves to remove white space. — Pimp Trizkit, Mar 05 '18 at 06:58
FYI if it's code you're wanting HTML to display tabs on, simply wrap it inside `
` *your tabbed code goes here* `
`. — Ronnie Royston, May 21 '18 at 00:02
Please can you answer to 'Michel de Ruiter question ? Can you give an example of what you want ? Adding some spaces at begin of line ? Simulate a table using TAB ? Can you give an example with 2 or 3 lines ? — schlebe, Apr 25 '20 at 06:05

score 1323 · Answer 1 · edited Jun 01 '14 at 00:13

1323

It depends on which character set you want to use.

There's no tab entity defined in ISO-8859-1 HTML - but there are a couple of whitespace characters other than   such as  , &ensp;,and &emsp;.

In ASCII, 	 is a tab.

Here is a complete listing of HTML entities and a useful discussion of whitespace on Wikipedia.

edited Jun 01 '14 at 00:13

James Donnelly

126,410
34
208
218

answered Oct 15 '09 at 11:11

kristian

22,731
8
50
78

3

What difference is between ` ` and ` `? I tested, both of them have exactly the same space ..! – Shafizadeh Dec 05 '15 at 18:33
9

The secret sauce to making show up as a tabbed space in HTML is the white-space CSS definition.
¡Muy bien! Tabbing works for me in Spanish & English
. white-space:pre; also works. You could also use a "tab" tag along with the CSS ::before Selector tab::before {content:"\0009";} but it doesn't show up as a tab when highlighting, cutting and pasting. – Jules Bartow May 28 '16 at 16:08
4

@Shafizadeh From [W3 specs](https://www.w3.org/MarkUp/html3/specialchars.html): _an en space is half the point size and an em space is equal to the point size of the current font._ ` ` is slightly bigger. I can see the difference in Chrome 64 and FireFox 58. – Dmitry Mar 07 '18 at 14:00

Alohci · Accepted Answer · 2017-02-08T12:44:21.313

625

It's much cleaner to use CSS. Try padding-left:5em or margin-left:5em as appropriate instead.

edited Feb 08 '17 at 12:44

answered Oct 15 '09 at 11:06

Alohci

78,296
16
112
156

15

@Alohci IMHO padding with CSS is not that good since when you will zoom the text in the browser the text size will increase but not the padding AFAIK. – AlexV Jun 16 '11 at 13:26
17

@AlexV - If you uses `em` as the dimension, as I did, it should expand with the text size. Even if you don't, it will depend on the nature of the zoom mechanism used. – Alohci Jun 16 '11 at 15:39
1

Isn't http://www.w3.org/MarkUp/html3/tabs.html a tab element? I have not heard of it before but it seems to be what you are asking for. – David Thielen Apr 25 '13 at 13:13
2

@DavidThielen - HTML 3, in which The TAB element appeared was a non-starter with the browser makers, and the TAB element was never implemented. Instead, HTML 3.2 was created which was somewhat simpler and that was implemented instead. – Alohci Apr 27 '13 at 10:32
padding left/right would work fine where an element has a width, but say you want rows to line up and you have `Datadata 2 More Datadata 2` then the rows will not line up. Commonly tabs are used in the design world to line up rows of text. – Eoin May 30 '17 at 12:29
3

@Eoin - indeed. I.e. what you really want in those cases are tab *stops*. But that wasn't what the OP was asking about. The OP was asking for a replacement for multiple sequential non-breaking spaces, which wouldn't line the rows up either. CSS has a `tab-size` property which is what you really want, but its browser support has been erratic. Failing that, table-layout or maybe flexbox are your best bets. – Alohci May 30 '17 at 12:53
4

This is not the correct response. You don't answer if there is a tab-character or not! – FFirmenich Jan 26 '18 at 12:38
@FFirmenich, Actually, the question does not a ask if there is a tab-character. It asks if is it possible to insert a tab character in HTML. To which the answer is simply "Yes". But in itself, that's not very helpful. – Alohci Jan 26 '18 at 13:54
I know CSS is better in most cases. It's the other cases I came to this question for. – Reverse Engineered Sep 19 '18 at 09:18
11

this doesn't answer the question. the answer below by kristian addresses the issue user posted about – Pranavan Maru Oct 31 '18 at 03:11
Do you know, that html is used in many applications except web browsers? Have you tried to use your solution for a line in Java Doc, for example? Your answer is only for one case. – Gangnus Jul 11 '19 at 12:15
@Gangnus - Sure. There's currently 45 answers to this question and none of them are appropriate for every use case. A complete answer if it could be written would be very long winded. This just covers one very common case. – Alohci Jul 11 '19 at 13:42
is appropriate to every case, and needn't additional remarks. But your answer need them, IMHO. – Gangnus Jul 12 '19 at 09:34
@Gangnus - is not appropriate for every case. [Try it with the consolas font](https://jsbin.com/dibohuxuqo/edit?html,css,output). – Alohci Jul 12 '19 at 11:40
Oh, that is interesting, too, of course, thank you. What is funny, I am using Consolas for my Java Editor in Eclipse, and THERE works. So, it is not about and font, but about , font and browser/editor. And IMHO, all such conditions, in which the answer should work, if known, should be present in answers - that greatly improves their quality. And – Gangnus Jul 15 '19 at 09:41

score 260 · Answer 3 · edited Dec 01 '18 at 16:46

260

No, Tab is just whitespace as far as HTML is concerned. I'd recommend an em-space instead which is this big (→| |←) ...typically 4 spaces wide — and is input as &emsp;.

You might even be able to get away with using the Unicode character (" ") for it, if you're lucky.

Here is a list of Space characters and “zero-width spaces” in Unicode.

edited Dec 01 '18 at 16:46

ashleedawg

20,365
9
72
105

answered Oct 15 '09 at 11:07

Will Robertson

62,540
32
99
117

WonderWorker · Answer 4 · 2017-10-18T10:41:32.160

&emsp; 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.

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

...and use them like so:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>

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 &nbsp, for example;  , &ensp; and the aforementioned &emsp;.

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

This is not a valid `XHTML` according to **[W3 validator](https://validator.w3.org/nu/#textarea)** — Buksy, Jun 08 '16 at 06:53
That's only half true, since is true valid W3C mark-up. But you are clearly referring to the favourable CSS example. In this case, we are utilising custom tags, which are new mark-up and not part of the W3C set. The W3C validator is strict to the degree of always flagging custom tags as errors. It's up to you which is more important. It's about time we got a decent official implimentation of tabs added to the Html mark-up set. Hope this helps. — WonderWorker, Jun 08 '16 at 15:29
I used this in a case for Swing JTable headers with a String value and an HTML arrow-type character, where I needed this character as a separator. Works great! Thanks! — Blake Neal, Mar 27 '17 at 19:47
"Oddly, there are no horizontal tab in html" Not all that odd as formatting has been consistently been moving away from html and into css, and a tab is not a visual element only a formatting element, but good answer and well explained — MikeT, Oct 18 '17 at 10:21
@Buksy The question is not tagged with XHTML so it doesn't matter that it's not valid XHTML. — TylerH, Nov 28 '22 at 17:32

score 126 · Answer 5 · edited Sep 26 '18 at 21:12

126

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

Type   to add a single space.
Type &ensp; to add 2 spaces.
Type &emsp; to add 4 spaces.

edited Sep 26 '18 at 21:12

loon

3
1

answered Jul 02 '18 at 03:31

sanjeev51

1,680
1
13
16

3

Just add `;` to them too. Like ` ` – Amio.io Jul 12 '18 at 11:35
@Mani The question was asked in 2009 and the accepted answer is from 2009. This answer was added in 2018.. When you look at it that way, it's not stupid. – ᴛʜᴇᴘᴀᴛᴇʟ Nov 03 '18 at 19:26
@ᴛʜᴇᴘᴀᴛᴇʟ Forget if this actually answers the question or not but the marked one doesn't accurately answer is the point I am trying to make. – Mani Nov 05 '18 at 02:32
I believe &emsp is a breaking white space character, whereas &nbsp is a non-breaking white space character, correct? So these would only be equivalent as far as visual space is concerned, but not regarding line breaking. – Joshua Mar 04 '22 at 19:04

score 70 · Answer 6 · edited May 21 '17 at 10:46

70

Try &emsp;

It is equivalent to four  s.

edited May 21 '17 at 10:46

Peter Mortensen

30,738
21
105
131

answered May 05 '16 at 07:31

Abhishek Goel

18,785
11
87
65

In fact is not the correct answer as https://www.w3.org/MarkUp/html3/specialchars.html . clearly says it depends on the type of font being used, also em space is equal to the point size of the current font, and the em space as being equivalent to two space characters – le0diaz Oct 11 '17 at 20:07
I believe &emsp is a breaking white space character, whereas &nbsp is a non-breaking white space character, correct? So these would only be equivalent as far as visual space is concerned, but not regarding line breaking. – Joshua Mar 04 '22 at 19:04

score 56 · Answer 7 · edited Sep 22 '13 at 08:45

There really isn't any easy way to insert multiple spaces inside (or in the middle) of a paragraph. Those suggesting you use CSS are missing the point. You may not always be trying to indent a paragraph from a side but, in fact, trying to put extra spaces in a particular spot of it.

In essence, in this case, the spaces become the content and not the style. I don't know why so many people don't see that. I guess the rigidity with which they try to enforce the separation of style and content rule (HTML was designed to do both from the beginning - there is nothing wrong with occasionally defining style of an unique element using appropriate tags without having to spend a lot more time on creating CSS style sheets and there is absolutely nothing unreadable about it when it's used in moderation. There is also something to be said for being able to do something quickly.) translates to how they can only consider whitespace characters as being used only for style and indentation.

And when there is no graceful way to insert spaces without having to rely on &emsp; and   tags, I would argue that the resulting code becomes far more unreadible than if there was an appropriately named tag that would have allowed you to quickly insert a large number of spaces (or if, you know, spaces weren't needlessly consumed in the first place).

As it is though, as was said above, your best bet would be to use &emsp; to insert in the correct place.

HTML wasn't designed from the beginning to be customly styled. — Markus Unterwaditzer, Oct 26 '12 at 17:17

score 49 · Answer 8 · edited Sep 22 '13 at 08:49

49

It's better to use the pre tag. The pre tag defines preformatted text.

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

know more about pre tag at this link

edited Sep 22 '13 at 08:49

Peter Mortensen

30,738
21
105
131

answered Aug 29 '13 at 17:35

Srikanth Muttavarapu

756
1
10
13

score 44 · Answer 9 · edited Nov 28 '22 at 17:34

44

Have this in CSS:

span.tab{
    padding: 0 80px; /* Or desired space*/
}

Then in your HTML have this be your "long tab" in mid sentence like I needed:

<span class="tab"></span>

Saves from the amount of   or &emsp; that you'd need.

edited Nov 28 '22 at 17:34

TylerH

20,799
66
75
101

answered Oct 26 '12 at 17:11

Rob

457
4
2

3

This will add 80px to the left and 80px to the right of the `span` tag, not exactly a tab. – mcont Jul 26 '14 at 19:21
Still a clever response as you're only adding a short bit of markup while allowing CSS to do the styling. – invot Jan 13 '16 at 23:27
I agree with @mcont and would change it to `padding: 0 0 0 80px` were a left tab of 80 pixels desired. However, mixing pixels and ems and ens is a bad practice. – Canned Man Jan 27 '21 at 11:00

score 21 · Answer 10 · edited Nov 28 '22 at 17:34

21

&emsp;, &ensp;,   or   can be used.

W3 says...

The character entities and denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.

Read More at W3.org for HTML4

Even more at Wikipedia

edited Nov 28 '22 at 17:34

TylerH

20,799
66
75
101

answered May 15 '14 at 21:51

shyammakwana.me

5,562
2
29
50

score 18 · Answer 11 · edited Sep 22 '13 at 08:36

18

AFAIK, the only way is to use

&nbsp;

If you can use CSS then you can use padding or margin. See Box model, and for Internet Explorer, also read Internet Explorer box model bug.

edited Sep 22 '13 at 08:36

Peter Mortensen

30,738
21
105
131

answered Oct 15 '09 at 11:06

rahul

184,426
49
232
263

score 11 · Answer 12 · edited Sep 22 '13 at 08:38

11

If you're looking to just indent the first sentence in a paragraph, you could do that with a small CSS trick:

p:first-letter {
    margin-left: 5em;
}

edited Sep 22 '13 at 08:38

Peter Mortensen

30,738
21
105
131

answered Oct 15 '09 at 11:56

peirix

36,512
23
96
126

Yeah. That'll work too. Just remember to put it on `:first-letter` if the point is to indent only the first sentence. – peirix Oct 15 '09 at 12:05

score 10 · Answer 13 · answered Oct 15 '09 at 11:09

10

If whitespace becomes that important, it may be better to use preformatted text and the <pre> tag.

answered Oct 15 '09 at 11:09

pavium

14,808
4
33
50

The OP isn't being so particular about whitespace, just asked about shortcuts for multiple ` `'s. Invoking the `
```
` tag will create a lot of extra work.
```
– isomorphismes Sep 05 '12 at 23:39
To avoid the monospace font, use css "white-space:pre-wrap" – hultqvist Sep 07 '12 at 21:54
Whitespace isn't a `that important` thing. It's a fact of life. – Radvylf Programs May 10 '18 at 23:42

user1388236 · Answer 14 · 2014-08-19T08:37:12.600

The <tab> tag never made it into browsers, despite being introduced in HTML3. I've always thought it a real pity because life would be much easier in many circumstances if we had it available to us. But you can easily remedy this to give you a fake <tab> tag. Add the following in the head of your HTML or else (without the style tags) into your CSS:

<style>
    tab { padding-left: 4em; }
</style>

From then on, when you need a tab in your document put <tab> in there. It isn't a true tab because it doesn't align to tab-marks, but it works for most needs, without having to dither around with clumsy character entities or spans. It makes it really easy to check your source, and a cinch to format simple things where you don't want to go to the hassle of tables or other more complex "solutions".

One nice aspect of this solution is that you can do a quick search/replace of a text document to replace all TABs with the <tab> tag.

You might be able to define a bunch of true absolute position TABs, then use the appropriate tab (e.g. <tab2> or <tab5> or whatever) where needed, but I haven't found a way to do that without it indenting subsequent lines.

score 7 · Answer 15 · answered Nov 15 '12 at 12:53

I have used a span with in line styling. I have had to do this as I as processing a string of plain text and need to replace the \t with 4 spaces (appx). I couldn't use   as further on in the process they were being interpreted so that the final mark up had non-content spaces.

HTML:

<span style="padding: 0 40px">&nbsp;</span>

I used it in a php function like this:

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);

score 7 · Answer 16 · edited Nov 28 '22 at 17:34

7

You can use a table and apply a width attribute to the first <td>.

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

Result

Content1       Content2
Content3       Content4

edited Nov 28 '22 at 17:34

TylerH

20,799
66
75
101

answered Sep 12 '13 at 09:37

mangkokorix

103
1
1

score 7 · Answer 17 · answered Nov 24 '13 at 20:56

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

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

with the HTML something like:

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>

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

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

with the HTML something like:

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>

score 7 · Answer 18 · answered Mar 13 '19 at 16:32

7

There is a simple css for it:

white-space: pre;

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

answered Mar 13 '19 at 16:32

Avi

117
1
6

score 6 · Answer 19 · edited Nov 28 '22 at 17:34

6

If you are using CSS, I would suggest the following:

p:first-letter  {
   text-indent:1em;
}

This will indent the first line like in traditional publications.

edited Nov 28 '22 at 17:34

TylerH

20,799
66
75
101

answered Oct 15 '09 at 13:10

Slevin

312
2
12

score 5 · Answer 20 · answered Oct 04 '21 at 08:01

5

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

answered Oct 04 '21 at 08:01

Imad Ullah

929
9
17

score 4 · Answer 21 · edited Jul 12 '14 at 06:38

4

<span style="margin-left:64px"></span>

Consider it like this: one tab is equal to 64 pixels. So this is the space we can give by CSS.

edited Jul 12 '14 at 06:38

Peter Mortensen

30,738
21
105
131

answered Jun 12 '14 at 09:07

Mateen

1,631
1
23
27

score 3 · Answer 22 · answered Feb 21 '14 at 21:49

Well, if one needs a long whitespace in the beginning of one line only out of the whole paragraph, then this may be a solution:

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

If that is too much to write or one needs such tabs in many places, then you can do this

<span class='tab'>&nbsp;</span>

Then include this into CSS:

span.tab {display:inline-block;height:1em;width:4em;}

score 3 · Answer 23 · answered May 24 '17 at 02:54

we can use style="white-space:pre" like this:

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

the blank space inside is filled with tabs, the amount of tabs is depend on the text.

it will looks like this:

Text    : value
Text2   : value2
Text32  : value32

score 3 · Answer 24 · answered May 21 '18 at 13:12

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.

score 2 · Answer 25 · answered Jan 25 '16 at 01:27

2

I use a list with no bullets to give the "tabbed" appearance. (It's what I sometimes do when using MS Word)

In the CSS file:

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

And in the HTML file use unordered lists:

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

The beauty of this solution is that you can make further indentations using nested lists.

A noob here talking, so if there are any errors, please comment.

answered Jan 25 '16 at 01:27

funct7

3,407
2
27
33

(x)HTML should specify the content of the document, how it is displayed should be handled by CSS. There are reasons that laying out webpages using tables should never be used for non-tabular data. – Nielsvh Apr 26 '16 at 20:08

score 2 · Answer 26 · answered Mar 24 '21 at 18:37

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:

<pre class='TAB'>&#009;</pre>

Place this in in your CSS:

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

Change the tab-size to your needs.

score 1 · Answer 27 · edited Sep 28 '12 at 09:45

Using CSS and best practice, the dynamic creation of nested, indented menus would be as follows:

Create a style for each nesting, such as indent1, indent2 etc, with each specifying its own left margin. Site structure should rarely go beyond three levels of nesting.
Use a static variable (integer) within the self-recursive function to track the recursion.
For each loop, append the loop number to the word indent, using server side scripting such as PHP or ASP, so that these menus are formatted appropriately by CSS.

Alternatively, loop through the static variable to add spacing using multiple   or <pre> tags, or other characters, as appropriate.

From testing the horizontal tab character, 	 I found that it doesn't work as a replacement to multiple   in the scenario I described. You may have different results.

score 1 · Answer 28 · edited Sep 22 '13 at 08:47

1

Only "pre" tag:

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

You can apply any CSS class on this tag.

edited Sep 22 '13 at 08:47

Peter Mortensen

30,738
21
105
131

answered Feb 06 '13 at 20:35

Yanni

2,583
2
20
7

score 1 · Answer 29 · edited Sep 22 '13 at 08:48

1

I would simply recommend:

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>

edited Sep 22 '13 at 08:48

Peter Mortensen

30,738
21
105
131

answered Mar 21 '13 at 14:09

yoav barnea

5,836
2
22
27

score 1 · Answer 30 · edited Jul 12 '14 at 06:36

1

You can also use:

p::before {
    content: "";
    padding-left: 30px;
}

And replace "p" with any other selector you have in mind.

edited Jul 12 '14 at 06:36

Peter Mortensen

30,738
21
105
131

answered May 15 '14 at 21:32

bognix

201
1
6

Eric A. Tuttle · Answer 31 · 2014-06-01T00:16:16.610

<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

Make sure the color code matches the background the px is variable to desired length for the tab.

Then add your text after the < t >.< /t >

The period is used as a space holder and it is easier to type, but the '& #160;' can be used in place of the period also making it so the color coding is irrelative.

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

This is useful mostly for displaying paragraphs of text though may come in useful in other portions of scripts.

score 1 · Answer 32 · answered May 24 '18 at 06:59

1

we use custom space span class

<span class='space'></span>

Include space class in CSS.

.space 
{
   margin-left:45px;
}

answered May 24 '18 at 06:59

rashedcs

3,588
2
39
40

1

As in Alohci's answer, please use `em`/`rem` measurements, to allow for browser text zoom. – Charlie Harding Jun 30 '18 at 17:30

score 0 · Answer 33 · answered Sep 20 '13 at 19:48

0

This is a bit of an ugly solution but you could just do this

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

And then use the tab variable in your strings.

answered Sep 20 '13 at 19:48

Aonghus McGovern

43
2
11

Khaled.K · Answer 34 · 2016-05-26T18:34:01.740

0

CSS

<html>
<head>
<style>
    tab:before
    {
        content: "\00a0\00a0\00a0\00a0";
    }
</style>
</head>

HTML

<body>
    <tab> #include &lt; stdio.h &gt; <br>
    <tab> <br>
    <tab> int main (void) <br>
    <tab> { <br>
    <tab> <tab> printf ("Hello, World!"); <br>
    <tab> <tab> return 0; <br>
    <tab> } <br>
</body>
</html>

Rendered

edited May 26 '16 at 18:34

answered May 26 '16 at 18:25

Khaled.K

5,828
1
33
51

Programatically you will need to calculate the number of characters in order to add addition blancs. When using tabular in a word processing software or in a text editor it will align at the next tab-column. – user3072843 Oct 16 '19 at 19:14
@user3072843 this solution is not programmatic, the idea here is to create a `` html-tag that left-indent text using `\00a0` which is a non-breaking space, and shouldn't won't collapse, since it's not a regular white space – Khaled.K Oct 17 '19 at 07:14

score 0 · Answer 35 · answered May 09 '17 at 10:20

This is not a direct answer but I wanted to add a tab in Markdown document. I was drawing an object graph like this:

--Parent
    |
    + Child 1

Of course the easy way it to mark it as code by indenting by 4 spaces and is then treated as code in Markdown.

    --Parent
        |
        + Child 1

mark stewart · Answer 36 · 2020-02-02T22:55:05.133

The &ampnbsp; 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

<div class=“tab> ...p and h elements... </div>

DISPLAY

1em approximately equals 4   but   em unit and &ampnbsp; 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.

Kal · Answer 37 · 2021-07-01T05:30:57.053

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

<p style="white-space: pre-wrap; tab-size: 4">&#9← One tab&#9&#9← two tabs&#9&#9&#9← three tabs&#9&#9&#9&#9← four tabs.</p>
<p style="white-space: pre-wrap; tab-size: 4">  ← This one is one character.</p>
<p style="white-space: pre-wrap; tab-size: 42">&#9← This one has come out too far.</p>
<p style="white-space: pre-wrap; tab-size: 8">&#9← Say! what a lot of tabs there are.</p>

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

Insert tab character in your text by entering &#9, 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. &#9 avoids such issues.

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

37 Answers37

Linked

Related