I have a situation as follows
<body>
Test<br />
test<br />
test1<br />
</body>
I need to add a tab after the 2nd test and 3rd test
so that it looks similar to this.
Test
test
test1
Is there a special HTML entity or special character for TAB. eg. Non-breaking space == & nbsp ;
thanks
If you need to display tabs (tabulator characters), use a PRE element (or any element with the white-space: pre; CSS applied to it).
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
pre { white-space: pre; }
</style>
</head>
<body>
<p>This is a normal paragraph, blah blah blah.</p>
<pre>This is preformatted text contained within a <code>PRE</code> element. Oh, and here are some tab characters, each of which are displayed between two arrows: ← → ← → ← → ← →</pre>
</body>
</html>
You can also use the HTML entity 	 instead of the actual tab character.
See Making a 'Tab' in HTML by Neha Sinha:
Preformatted
You can put tab characters in your HTML directly if you use what’s called “preformatted” text.In HTML, surround text that you want “preformatted” in a pair of “
<pre>” and “</pre>” start and end tags.Tables
You can use a html table so that everything you put within the set of rows(
<tr>) and columns(<td>) shows up the same way. You can very well hide the table borders to show the text alone.Using the
<dd>TagThe
<dd>tag is for formatting definitions. But it also will create a line break and make a tab!
, The Non-Breaking SpaceOne bit of HTML code I used in the table example is the “non-breaking space,” encoded as in HTML. This just gives you some space. Combined with a line break,
<br>, you can create some tab-like effects.
Test<br/>
<pre> </pre>test<br/>
<pre> </pre>test1<br/>
this should render as:
Test
test
test1
The simplest way I can think of would be to place the text in nested divs. Then add margin to the left of div. It will cascade down, giving you indentation.
<div id='testing'>
Test1
<div>
Test2
<div>
Test3
</div>
</div>
</div>
With the CSS:
#testing div {
margin-left: 10px;/*or whatever indentation size you want*/
}
With those, you'll get a nice tree, no matter how many levels deep you want to go.
EDIT: You can also use padding-left if you want.
Ye gods, tables?
Looks like an obvious use-case for lists, with variable margin and list-style-type: none; seasoned to taste.
I think that easiest thing to do is to use UL/LI html tags and then to manipulate (and remove if needed) symbols in front of list with CSS.
Then you get something like:
There have been a variety of good and bad answers so far but it seems no-one has addressed the way that you can choose between the solutions.
The first question to ask is "What is the relationship between the data being displayed?". Once this has been answered it the HTML structure you use should be obvious.
Please update the question explaining more about the structure of the content you need to display and you should find that you get better answers. At the moment everything from using <pre> to tables might be the best solution.
If you really want to use tabs (== tabulator characters), you have to go with the following solution, which I don't recommend:
<pre>
test
	test
		test
</pre>
or replace the <pre/> with <div style="white-space: pre" /> to achieve the same effect as with the pre element. You can even enter a literal tab character instead of the escaped 	.
I don't recommend it for most usages, because it is not really semantic, that is, from viewing the HTML source a program cannot deduce any useful information (like, e.g., "this is a heading" or such). You'd be better off using one of the nice margin-left examples of the other answers. However, if you'd like to display some stuff like source code or the such, the above solution would do it.
Cheers,