View Full Version : Spaces

10-02-2011, 08:20 PM
So <br/> creates a brake but is there a way to make "tab" space?

10-02-2011, 10:56 PM
To the best of my knowledge there is no pure CSS way of creating "tabs" that act like tabs in a Word-processor --> you can set them at different positions and if your text is going over one (or several) of those positions we automatically snap to the next available next time the text contains a tab...

But it can be done quite easily with JavaScript (at least for left tabs):

<!DOCTYPE html>
<script type="text/javascript">
* hrsAsTabs
* settings: {
* parentElement: -> DOM element: the parent element which the tabs apply,
* positions: -> Array of numbers: tab positions in pixels (within the parentElement),
* }
var hrsAsTabs = function(settings){
s = settings;
var i, j, pos, el, spans = [], hrs = s.parentElement.getElementsByTagName('hr');
// replace hrs with spans
for(i = hrs.length-1; i >= 0; i--){
el = document.createElement('span');
with(el.style){margin = 0;padding = 0;border = 0;background = 'none';display = 'inline-block'};
// fix tabs
for(i = 0; i < spans.length; i++){
pos = spans[i].el.offsetLeft;
for(j = 0; j < s.positions.length; j++){
if(s.positions[j] > pos){
spans[i].el.style.width = (s.positions[j] - pos) + 'px';

// example
onload = function(){
parentElement: document.getElementById('example'),
positions: [100,200,500]
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div id="example">
Hello<hr/>Tab 1<hr/>Tab 2<hr/>Tab3<br/>
Something long here<hr/>New tab<hr/>Next tab

10-03-2011, 01:14 AM
A simplier way is to utilize the pre tag:

Hello <pre style="display:inline;"> </pre> World

Anything inside the pre tag will be interpreted, so if you wanted to add a TABbed space, just add it inside the pre tags and it should work.

Hope that helps.

Philip M
10-03-2011, 08:59 AM
To expand on rangana's method:-

<pre style="font-family: Verdana, Arial, sans serif; font-size:12pt">
Last First Date of Birth
----- ----- ---------------
Doe Jane February 19, 1964
Smith Peter June 2, 1968
Robertson Alan May 15, 1972

Another way is to use HTML tables.