CODEWITHSUNDEEP
html
Roch
Roch

Reputation: 22061

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

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

Upvotes: 1053

Views: 3357038

Answers (30)

mark stewart
mark stewart

Reputation: 421

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 &nbsp; but &nbsp; 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.

Upvotes: 0

Khaled.K
Khaled.K

Reputation: 5960

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

enter image description here

Upvotes: 0

Aonghus McGovern
Aonghus McGovern

Reputation: 43

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.

Upvotes: 0

rashedcs
rashedcs

Reputation: 3725

we use custom space span class

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

Include space class in CSS.

.space 
{
   margin-left:45px;
}

Upvotes: 1

bognix
bognix

Reputation: 211

You can also use:

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

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

Upvotes: 1

Frank34
Frank34

Reputation: 79

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 your CSS:

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

Change the tab-size to your needs.

Upvotes: 2

funct7
funct7

Reputation: 3601

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.

Upvotes: 2

Evgeny Savelev
Evgeny Savelev

Reputation: 131

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;}

Upvotes: 3

Slevin
Slevin

Reputation: 312

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.

Upvotes: 6

Avi
Avi

Reputation: 117

There is a simple css for it:

white-space: pre;

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

Upvotes: 7

Gordy
Gordy

Reputation: 79

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 &nbsp; 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);

Upvotes: 7

peirix
peirix

Reputation: 37771

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;
}

Upvotes: 11

Rob
Rob

Reputation: 457

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 &nbsp; or &emsp; that you'd need.

Upvotes: 44

WonderWorker
WonderWorker

Reputation: 9092

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

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

Upvotes: 204

mangkokorix
mangkokorix

Reputation: 103

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

Upvotes: 7

shyammakwana.me
shyammakwana.me

Reputation: 5752

&emsp;, &ensp;, &#8195; or &#8194; 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 HTML3

Read More at W3.org for HTML4

Even more at Wikipedia

Upvotes: 21

Imad Ullah
Imad Ullah

Reputation: 1238

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

Upvotes: 5

Kal
Kal

Reputation: 2674

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'):

  1. 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!
  2. Add white-space: pre-wrap; to your text element's CSS rule, to stop whitespace characters (including tabs) from collapsing.
  3. 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.

Upvotes: 0

Will Robertson
Will Robertson

Reputation: 64670

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.

Upvotes: 261

sanjeev51
sanjeev51

Reputation: 1730

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

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

Upvotes: 130

Olumide
Olumide

Reputation: 368

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.

Upvotes: 3

Esgi Dendyanri
Esgi Dendyanri

Reputation: 537

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

Upvotes: 3

Abhishek Goel
Abhishek Goel

Reputation: 19771

Try &emsp;

It is equivalent to four &nbsp;s.

Upvotes: 71

hum3
hum3

Reputation: 1711

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

Upvotes: 0

Alohci
Alohci

Reputation: 83125

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

Upvotes: 626

user1388236
user1388236

Reputation: 139

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.

Upvotes: 10

Mateen
Mateen

Reputation: 1671

<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.

Upvotes: 4

Eric A. Tuttle
Eric A. Tuttle

Reputation: 19

<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.

Upvotes: 1

kristian
kristian

Reputation: 23039

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 &nbsp; such as &thinsp;, &ensp;,and &emsp;.

In ASCII, &#09; is a tab.

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

Upvotes: 1328

StrangeDucks
StrangeDucks

Reputation: 106

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>

Upvotes: 7

Related Questions