如何格式化爪哇脚本/html刺痛设置宽度？

Question

我想创建一个乘法10 x 10板。

每个“单元格”应具有相同的宽度。

for (i = 1; i < 11; i++) {

  for (j = 1; j < 11; j++) {

    document.write(i * j + " ")

  }

  document.write("<br>")

}

Answer 1

使用字符串的解决方案：let html = "";for (let i = 1; i < 11; i++) {&nbsp; for (let j = 1; j < 11; j++) {&nbsp; &nbsp; html += String(i * j).padStart(3, " ") + " ";&nbsp; }&nbsp; html += "<br>";}document.getElementById("output").innerHTML = html.replace(/ /g, "&nbsp;");#output {&nbsp; font-family: monospace;}<output id="output"></output>

Answer 2

用<pre> 预格式化文本 元素本机字符串.prototype.padStart（）document.write("<pre>")for (i = 1; i < 11; i++) {&nbsp; for (j = 1; j < 11; j++) {&nbsp; &nbsp; document.write(String(i * j).padStart(4, ' '))&nbsp; }&nbsp; document.write("<br>")}document.write("</pre>")

Answer 3

此解决方案适用于 和 html 选项卡实体pre&#9;document.write("<pre>")&nbsp; for (let i = 1; i < 11; i++) {&nbsp; &nbsp; for (let j = 1; j < 11; j++)&nbsp; &nbsp; &nbsp; document.write(i * j + "&#9;")&nbsp; &nbsp; document.write("<br>")&nbsp; }document.write("</pre>")你可以用css控制空间：tab-size* {&nbsp; &nbsp; -moz-tab-size: 3em;&nbsp; &nbsp; -o-tab-size: 3em;&nbsp; &nbsp; tab-size: 3em;}

Answer 4

您的代码中存在几个问题：您应该使用<预>（预格式化文本）标记您应该在 和 索引前面添加 一个，以将其本地范围缩小到letijfor在循环中，如果将索引条件定义为（因为您正在计算从1到10的数字）而不是for<= 10< 11你需要一个前缀和一个后缀（为了在我的示例中构建前缀，我使用了一个函数）document.write('<pre>');for (let i = 1; i <= 10; i++) {&nbsp; for (let j = 1; j <= 10; j++) {&nbsp; &nbsp; let number = i * j;&nbsp; &nbsp; let prefix = get_prefix(number);&nbsp; &nbsp; let suffix = '&nbsp;';&nbsp; &nbsp; document.write(prefix + number + suffix)&nbsp; }&nbsp; document.write('<br>')}document.write('</pre>');function get_prefix(number) {&nbsp; let prefix = '';&nbsp; if (number < 100) {&nbsp; &nbsp; prefix += '&nbsp;';&nbsp; }&nbsp; if (number < 10) {&nbsp; &nbsp; prefix += '&nbsp;';&nbsp; }&nbsp; return prefix;}