{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Luminary・发光体 的问题《How do I create tab indenting in html》','https://www.manongdao.com/q-502396.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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
PREelement (or any element with thewhite-space: pre;CSS applied to it).You can also use the HTML entity
	instead of the actual tab character.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:
<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 used<div>s allow for style control and, depending on use/objective, his answer may be the best way to go.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.
With the CSS:
With those, you'll get a nice tree, no matter how many levels deep you want to go.
EDIT: You can also use
padding-leftif you want.If you really want to use tabs (== tabulator characters), you have to go with the following solution, which I don't recommend:
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-leftexamples 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,
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.Ye gods, tables?
Looks like an obvious use-case for lists, with variable margin and list-style-type: none; seasoned to taste.