Search code examples
javascriptcodepen

How can you format JavaScript / html stings in set width?

I want to create a multiply 10 x 10 board.
Each "cell" shall have the same width.

for (i = 1; i < 11; i++) {
  for (j = 1; j < 11; j++) {
    document.write(i * j + " ")
  }
  document.write("<br>")
}

Solution

  • This solution works with pre and the html tab entity &#9;

    document.write("<pre>")
  for (let i = 1; i < 11; i++) {
    for (let j = 1; j < 11; j++)
      document.write(i * j + "&#9;")
    document.write("<br>")
  }
document.write("</pre>")

    You can control the space with css tab-size:

    * {
    -moz-tab-size: 3em;
    -o-tab-size: 3em;
    tab-size: 3em;
}