Is it possible to insert a tab character in HTML instead of having to type four times?
This question is related to
html
The answer is
  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>_x000D_
_x000D_
<html>_x000D_
<head>_x000D_
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />_x000D_
<title>Tabulation example</title>_x000D_
_x000D_
<style type="text/css">_x000D_
dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */_x000D_
tab1 { padding-left: 4em; }_x000D_
tab2 { padding-left: 8em; }_x000D_
tab3 { padding-left: 12em; }_x000D_
tab4 { padding-left: 16em; }_x000D_
tab5 { padding-left: 20em; }_x000D_
tab6 { padding-left: 24em; }_x000D_
tab7 { padding-left: 28em; }_x000D_
tab8 { padding-left: 32em; }_x000D_
tab9 { padding-left: 36em; }_x000D_
tab10 { padding-left: 40em; }_x000D_
tab11 { padding-left: 44em; }_x000D_
tab12 { padding-left: 48em; }_x000D_
tab13 { padding-left: 52em; }_x000D_
tab14 { padding-left: 56em; }_x000D_
tab15 { padding-left: 60em; }_x000D_
tab16 { padding-left: 64em; }_x000D_
_x000D_
</style>_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<p>Non tabulated text</p>_x000D_
_x000D_
<p><tab1>Tabulated text</tab1></p>_x000D_
<p><tab2>Tabulated text</tab2></p>_x000D_
<p><tab3>Tabulated text</tab3></p>_x000D_
<p><tab3>Tabulated text</tab3></p>_x000D_
<p><tab2>Tabulated text</tab2></p>_x000D_
<p><tab3>Tabulated text</tab3></p>_x000D_
<p><tab4>Tabulated text</tab4></p>_x000D_
<p><tab4>Tabulated text</tab4></p>_x000D_
<p>Non tabulated text</p>_x000D_
<p><tab3>Tabulated text</tab3></p>_x000D_
<p><tab4>Tabulated text</tab4></p>_x000D_
<p><tab4>Tabulated text</tab4></p>_x000D_
<p><tab1>Tabulated text</tab1></p>_x000D_
<p><tab2>Tabulated text</tab2></p>_x000D_
_x000D_
</body>_x000D_
_x000D_
</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  , for example;  ,   and the aforementioned  .
It's also worth mentioning that in ASCII and Unicode, 	 is a horizontal tabulation.
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
You can use a table and apply a width attribute to the first <td>.
Code:
<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
There is a simple css for it:
white-space: pre;
It keeps the spaces that you add in the HTML rather than unifying them.
You can also use:
p::before {
content: "";
padding-left: 30px;
}
And replace "p" with any other selector you have in mind.
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"> </span>
I used it in a php function like this:
$message = preg_replace('/\t/', '<span style="padding: 0 40px"> </span>', $message);
If whitespace becomes that important, it may be better to use preformatted text and the <pre> tag.
This is a bit of an ugly solution but you could just do this
var tab = ' ';
And then use the tab variable in your strings.
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.
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;'> </span>
If that is too much to write or one needs such tabs in many places, then you can do this
<span class='tab'> </span>
Then include this into CSS:
span.tab {display:inline-block;height:1em;width:4em;}
we use custom space span class
<span class='space'></span>
Include space class in CSS.
.space
{
margin-left:45px;
}
Try  
It is equivalent to four s.
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>
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   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   to insert in the correct place.
<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> </t>
This is useful mostly for displaying paragraphs of text though may come in useful in other portions of scripts.
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.
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.
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.
CSS
<html>
<head>
<style>
tab:before
{
content: "\00a0\00a0\00a0\00a0";
}
</style>
</head>
HTML
<body>
<tab> #include < stdio.h > <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
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  .
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.
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;
}
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  ,  ,and  .
In ASCII, 	 is a tab.
Here is a complete listing of HTML entities and a useful discussion of whitespace on Wikipedia.
<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.
I came across this while searching for a method and ended up figuring out my own that seems to work easily for what's wanted. I'm new to posting here so I hope this works... But 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   that you'd need.
Hope this helps someone, cheers!
AFAIK, the only way is to use
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.
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
Only "pre" tag:
<pre>Name: Waleed Hasees
Age: 33y
Address: Palestine / Jein</pre>
You can apply any CSS class on this tag.
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
<div class=“tab> ...p and h elements... </div>
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.
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.
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.
 ,  ,   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.
Even more at Wikipedia
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
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>
Source: Stackoverflow.com