Adding whitespace in a Javascript document.write

Question

So I'm currently creating a dynamic table using some JavaScript and a set of objects. I need to add in some white space between the two but one space isn't enough, I need to have it almost tabbed out. What would be the best way to do this? Here is my code for it so far:

var sections = {

   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};

document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + (i>0?'<br><br><br><br>':'') + o.sname + '  ' + o.mscore + ' ' }, '')
);

Solution 1

If you want to add whitespace to the DOM, try using a nonbreaking space

' '

instead of

' '

These nonbreaking spaces can be chained.

  

would force two spaces to be displayed on the page.

Solution 2

You could return s + "<div class='whatever'>" + o.sname + ' ' + o.mscore + "</div>" and use CSS to set the whitespace.

var sections = {

   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};

document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + "<div class='whatever'>" + o.sname + '  ' + o.mscore + "</div>" }, '')
);

div.whatever { padding-bottom: 5em; }

update Using a table:

var sections = {

   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};

document.write("<table>" + Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + "<tr><td>" + o.sname + '</td><td>' + o.mscore + "</td></tr>" }, '')
+ "</table>");

td { padding-bottom: 2em }

Solution 3

The best way to control the spacing would be through CSS. Wrap each one in a class and style it according to taste.

An alternative is to use a couple non-breaking spaces  .

As such: return s + (i>0?'<br><br><br><br>':'') + o.sname + '&nbsp;&nbsp;&nbsp;' + o.mscore + ' ' }, '')

Solution 4

fastest solution is to wrap all your sections in a <pre></pre> tag.

in your code:

var sections = {

   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};

document.write("<pre>"); //<--here
document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + (i>0?'<br><br><br><br>':'') + o.sname + '  ' + o.mscore + ' ' }, '')
);
document.write("</pre>"); //<--...and here

a better solution would be to use CSS

.wrapper-class {
    white-space: nowrap;
}

Solution 5

Use four or five non-breaking spaces to add a tab. The code will look like this    

If you need to use tabs throughout something you are displaying, consider formatting options offered by CSS.

View more solutions

Comments

[DoN_Dan]

how would I go about adding whitespace inbetween the two scores in order for it to be equal (no out of alignment issues) ?

[Kenney]

You would need to use a monospaced font, calculate the maximum string length for o.sname and pad the rest. But it's far easier to use a <table> and let the browser do all that for you. I've updated the answer with an example.