Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I set up tab stops in html5?

Tags:

html

I would like to set up tab stops in html5 and be able to align text to them, just like in Word. For my application I can't use tables. Is there a way to do this? Do I have to use Javascript?

like image 464
Wayne Christopher Avatar asked Aug 22 '13 00:08

Wayne Christopher


People also ask

How do I add a tab in html5?

The tab character can be inserted by holding the Alt and pressing 0 and 9 together.

Is there an HTML tag for tab?

Unlike with HTML space, there is no particular HTML tab character you could use. You could technically use the 	 entity as the tab is character 9 in the ASCII. Unfortunately, HTML parsers will simply collapse it into a single space due to the whitespace collapse principle. There used to be a special tab element.

How do I create a custom tab in HTML?

Approach: In the body tag create some tabs under the div tag with a Custom-Data-Attribute that holds the id of the content. Create another div tag to store the content of the tab with a specific id. Specify data attributes for each content tag to display only one tab content at a time.


2 Answers

Despite the assertions of the other posters to the contrary, there are valid reasons to want to do what the OP asked and many ways to do it using modern CSS (and more in the draft specification process as I write this). Here is just one way.

<!DOCTYPE HTML>
<html>
 <head>
  <title>Tabs with css</title>
  <style>
  {body: font-family: arial;}
  div.row span{position: absolute;}
  div.row span:nth-child(1){left: 0px;}
  div.row span:nth-child(2){left: 250px;}
  div.row span:nth-child(3){left: 500px;}
  </style>
 </head>
 <body>
  <div class="row"><span>first row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>second row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>third row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>fourth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
  <div class="row"><span>fifth row data before first tab</span><span>data left aligned with first tab</span><span>data aligned with second tab</span></div><br>
 </body>
</html>

See sample results here: http://jsfiddle.net/Td285/

Another example, with overflow clipped: http://jsfiddle.net/KzhP8/

like image 56
Ted Cohen Avatar answered Sep 28 '22 02:09

Ted Cohen


You can use the CSS property p { text-indent:50px; }

You can use css classes for each indent like

h1 { text-indent: 10px; }
h2 { text-indent: 14px; }
h3 { text-indent: 18px; }
p { text-indent: 20px; }
p.notice { text-indent: 24px; }

and do the HTML like this

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Text 1</p>
<p class="notice">Text 2</p>

Because you can only indent one line with this property there's another way to support multiline-indent:

h1 { padding-left: 10px; }
h2 { padding-left: 14px; }
h3 { padding-left: 18px; }
p { padding-left: 20px; }
p.notice { padding-left: 24px; }

And finally a fiddle.

like image 25
Pixelmonster Avatar answered Sep 28 '22 03:09

Pixelmonster