Menu
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?
464
The tab character can be inserted by holding the Alt and pressing 0 and 9 together.
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.
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.
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/
56
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
