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
39 Answers
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.
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 /> 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,
Ye gods, tables?
Looks like an obvious use-case for lists, with variable margin and list-style-type: none; seasoned to taste.
1There 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.
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.
Example
Test<br/>
<pre> </pre>test<br/>
<pre> </pre>test1<br/>this should render as:
Test test test1I 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:
- Test
- Test2
- Test 3
More info + working example you can try out.
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.
I am not a fan of using CSS to simulate a Tab Character.
For Indenting, yes, by all means use CSS - but not for Tab Characters.
For a single Tab, I would replace with " " (4 Spaces).
This is similar to what was used to format your Question for display.
The added benefit to this is (if someone copies your text)
it will preserve the spacing when pasted into Word or Notepad.
Example:
Test<br />
test<br />
test1Note: If your text is in a <pre> tag, then @Boldewyn's answer is the better option.
Keep in mind, the text in the <pre> tag may render differently than expected.
I realize this is an old post, however someone may want to use the following list in order to create an indented list (by using a description list)
In my opinion, this is a much cleaner way than many of the other answers here and may be the best way to go:
- It does not use a bunch of whitespace characters (which gives little control in terms of formatting for styles)
- It does not use the
<pre>tag, which should only be used for formatting (in my opinion, this should pretty much be a last resort or a special-case use in HTML);<pre>tag is also whitespace-dependent and not CSS dependent when used the way it is intended to be usedw3schools says to use the
<pre>element when displaying text with unusual formatting, or some sort of computer code. - description lists allow for more control in terms of formatting and hierarchy
- The answer by @geowa4, I would say, is another great way to accomplish this.
<div>s allow for style control and, depending on use/objective, his answer may be the best way to go.
<dl> <dt>Test</dt> <dd> <dl> <dt>test</dt> <dd>test1</dd> </dl> </dd>
</dl>
