Right-Aligned Number Triangle (1 to i)

Beginner
⏱️ 6 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Indentation + nested loops
Right-aligned number triangle output in JavaScript programming

What You’ll Learn

How to print a triangle where each row prints 1 to i, and spaces are printed before the numbers to make it right-aligned.

This is a great exercise for mastering nested loops and formatting output.

⭐ Pattern Output

For size = 5, the pattern looks like this:

Output
    1
   1 2
  1 2 3
 1 2 3 4
1 2 3 4 5
1

Complete JavaScript Program

We first print indentation spaces, then we print numbers from 1 to the row number.

JavaScript
const size = 5;

for (let i = 1; i <= size; i++) {
  let line = "";

  // indentation (2 spaces per missing number)
  for (let j = size; j > i; j--) {
    line += "  ";
  }

  for (let k = 1; k <= i; k++) {
    line += k + " ";
  }

  console.log(line.trimEnd());
}
Try it Yourself

🧠 How It Works

1

Set rows

size = 5 prints 5 rows.

Setup
2

Row loop (i)

For each row i, we build a single output line.

Rows
3

Indentation loop (j)

We add size - i indentation blocks. As i increases, indentation shrinks.

Spaces
4

Number loop (k)

Then we print numbers from 1 to i on the same line.

Numbers
=

Right-aligned triangle

Indentation + increasing numbers creates the right-aligned shape.

2

Variation — Browser (document.write) Version

This is the same logic as the old reference: print indentation using &nbsp;, then print numbers from 1..i.

HTML
<!DOCTYPE html>
<html>
<body>
<script>
var i, j, k;
for (i = 1; i <= 5; i++) {
  for (j = 5; j > i; j--)
    document.write("&nbsp;&nbsp;");
  for (k = 1; k <= i; k++)
    document.write(k + "&nbsp;&nbsp;");
  document.write("<br>");
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Change size to print more (or fewer) rows
  • Replace k with k*k to print squares
  • Print each row as a string first (cleaner formatting)
  • Use monospace fonts for perfect alignment

Avoid

  • Using normal spaces in HTML (they collapse); prefer &nbsp;
  • Forgetting to decrease indentation (triangle won’t align)
  • Leaving trailing spaces (use trimEnd() in console output)

Key Takeaways

1

Use nested loops to print rows and columns (spaces + numbers).

2

Indentation count is size - i for a right-aligned triangle.

3

Each row prints a simple sequence from 1 to i.

4

&nbsp; is essential for aligned HTML output.

❓ Frequently Asked Questions

Each number is printed with a trailing space (e.g., 1), so using two spaces for indentation keeps the columns visually aligned.
Yes. Start k from 0 and print up to i - 1.
Remove the indentation loop. Then only print the number loop for each row.
Yes. Build the row using an array and join(" "), then add indentation before it.

Explore More JavaScript Number Patterns!

Once you master indentation + loops, you can create many centered/right-aligned patterns easily.

All Number Patterns →
Did you know?

Many “centered” and “right-aligned” patterns are just left-aligned patterns with a prefix of spaces. Once you control indentation, you can shape the output however you want.

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Number Pattern 42 JavaScript Number Pattern Programs