JavaScript Multiplication Table Program with HTML CSS

JavaScript Multiplication Table is a multiplication table for any number.

Using JavaScript we program and generate a multiplication table of any number.

Java multiplication table generation using for loop is developed as below

Create a text box to get a number from the user.
Create a button to submit value
on the button click to call the multiplicationTable() function.
the function will get the value of the text box
loop to generate a multiplication table.
print the data on an HTML page.

Example Multiplication table javascript user input

<!DOCTYPE html>
<html>
    <head>
        <style>
            #mtable {
              font-family: Arial, Helvetica, sans-serif;
              border-collapse: collapse;
              width: 30%;
            }
            #mtable td, #mtable th {
              border: 1px solid #ddd;
              padding: 8px;
              }
            #mtable tr:nth-child(even){background-color: #FFF8DC;}
            #mtable tr:hover {background-color: #F5DEB3;}
        </style>
    </head>
    <body>
        <h2>Generate Table</h2>
        <label>Enter Number</label>
        <input type="number" id="number" />
        <input type="button" value="generate" onclick="multiplicationTable()" />
        <br /><br /><br />
        <div id="result"></div>
        <script>
            function multiplicationTable() {
            var table;
            table='<table id="mtable">';
            var num=document.getElementById("number").value;
            if(num==null || num=="")
            num=5;
               for(i=1;i<=10;i++){
                  table+='<tr><td>'+num+'*'+i+'='+num*i+'</td></tr>';
               }
            table+='</table>';
            document.getElementById("result").innerHTML = table;
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#mtable {

font-family: Arial, Helvetica, sans-serif;

border-collapse: collapse;

width: 30%;

}

#mtable td, #mtable th {

border: 1px solid #ddd;

padding: 8px;

}

#mtable tr:nth-child(even){background-color: #FFF8DC;}

#mtable tr:hover {background-color: #F5DEB3;}

</style>

</head>

<body>

<h2>Generate Table</h2>

<label>Enter Number</label>

function multiplicationTable() {

var table;

table='<table id="mtable">';

var num=document.getElementById("number").value;

if(num==null || num=="")

num=5;

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

table+='<tr><td>'+num+'*'+i+'='+num*i+'</td></tr>';

}

table+='</table>';

document.getElementById("result").innerHTML = table;

}

</script>

</body>

</html>

Try It

Multiplication table in javascript Example: Multiplication table in Range

Here user will enter the range to generate a multiplication table if the user enters 1 and 10 then a multiplication table from 1 to 10 is generated.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #mtable {
              font-family: Arial, Helvetica, sans-serif;
              border-collapse: collapse;
              width: 30%;
            }
            #mtable td, #mtable th {
              border: 1px solid #ddd;
              padding: 8px;
              }
            #mtable tr:nth-child(even){background-color: #FFF8DC;}
            #mtable tr:hover {background-color: #F5DEB3;}
        </style>
    </head>
    <body>
        <h2>Generate Tables</h2>
        <label>Number1</label>
        <input type="number" id="number1" />
        <label>Number2</label>
        <input type="number" id="number2" />
        <input type="button" value="generate" onclick="multiplicationTable()" />
        <br /><br /><br />
        <div id="result"></div>
        <script>
            function multiplicationTable() {
            var table;
            table='<table id="mtable">';
            var num1=document.getElementById("number1").value;
            var num2=document.getElementById("number2").value;
            if(num1==null || num1=="")
            num1=1;
            if(num2==null || num2=="")
            num2=10;
            for(i=1;i<=10;i++){
             table+='<tr>';
              for(num=num1;num<=num2;num++){
                  table+='<td>'+num*i+'</td>';
               }
               table+='</tr>';
              }
            table+='</table>';
            document.getElementById("result").innerHTML = table;
            }
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

#mtable {

font-family: Arial, Helvetica, sans-serif;

border-collapse: collapse;

width: 30%;

}

#mtable td, #mtable th {

border: 1px solid #ddd;

padding: 8px;

}

#mtable tr:nth-child(even){background-color: #FFF8DC;}

#mtable tr:hover {background-color: #F5DEB3;}

</style>

</head>

<body>

<h2>Generate Tables</h2>

<label>Number1</label>

<label>Number2</label>

function multiplicationTable() {

var table;

table='<table id="mtable">';

var num1=document.getElementById("number1").value;

var num2=document.getElementById("number2").value;

if(num1==null || num1=="")

num1=1;

if(num2==null || num2=="")

num2=10;

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

table+='<tr>';

for(num=num1;num<=num2;num++){

table+='<td>'+num*i+'</td>';

}

table+='</tr>';

}

table+='</table>';

document.getElementById("result").innerHTML = table;

}

</script>

</body>

</html>

Try It

Create an html page with the sole purpose to show multiplication tables of 2 to 10 (row-wise) created by JavaScript. initially, the page is blank. with help of set interval function print a row every 5 seconds in different colors and increasing font size.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
    <body>
        <h2>Multiplication Tables</h2>
         <br /><br /><br />
        <div id="result"></div>
        <script>
        var num1=2;
        var num2=10;
        var row=1;
		var fontSize=100;
        var interval;
		const color = ["#FFC1CF", "#E8FFB7", "E2A0FF","#C4F5FC","#B7FFD8","#eaac8b","#b56576","#","#fee440","#e8e8e4","#5a189a","#b1a7a6","#4361ee","#7209b7","#c4fff9","#1f7a8c","#f4845f","#eae0d5","#aeb4a9","#a6808c"];
		var table = document.createElement('table');
		table.setAttribute('class', 'table table-hover');
		 if(row==1){
		 var tr = document.createElement('tr');
		 for(var num=num1;num<=num2;num++){
		       var td = document.createElement('td');
		       var textNode=document.createTextNode('Table of '+num);
		       td.appendChild(textNode);
			   tr.appendChild(td);
            }
         table.appendChild(tr);
		 document.body.appendChild(table);
       }
	    interval=setInterval(multiplicationTable,1000);
	   
        function multiplicationTable() {
		console.log(num1+" "+num2+" "+row);
               var tr = document.createElement('tr'); 
			  for(num=num1;num<=num2;num++){
			        var td = document.createElement('td');
		            var textNode=document.createTextNode(num*row);
					td.appendChild(textNode);
					tr.appendChild(td);
					tr.style.backgroundColor = color[row];
					td.style.fontSize = fontSize+'%';
					fontSize+=0.5;
               }
             table.appendChild(tr);
			 row++;
			 if(row>20){
						console.log("row is"+row);
						clearInterval(interval);
					}
            }
			
        </script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h2>Multiplication Tables</h2>

var num1=2;

var num2=10;

var row=1;

var fontSize=100;

var interval;

const color = ["#FFC1CF", "#E8FFB7", "E2A0FF","#C4F5FC","#B7FFD8","#eaac8b","#b56576","#","#fee440","#e8e8e4","#5a189a","#b1a7a6","#4361ee","#7209b7","#c4fff9","#1f7a8c","#f4845f","#eae0d5","#aeb4a9","#a6808c"];

var table = document.createElement('table');

table.setAttribute('class', 'table table-hover');

if(row==1){

var tr = document.createElement('tr');

for(var num=num1;num<=num2;num++){

var td = document.createElement('td');

var textNode=document.createTextNode('Table of '+num);

td.appendChild(textNode);

tr.appendChild(td);

}

table.appendChild(tr);

document.body.appendChild(table);

}

interval=setInterval(multiplicationTable,1000);

function multiplicationTable() {

console.log(num1+" "+num2+" "+row);

var tr = document.createElement('tr');

for(num=num1;num<=num2;num++){

var td = document.createElement('td');

var textNode=document.createTextNode(num*row);

td.appendChild(textNode);

tr.appendChild(td);

tr.style.backgroundColor = color[row];

td.style.fontSize = fontSize+'%';

fontSize+=0.5;

}

table.appendChild(tr);

row++;

if(row>20){

console.log("row is"+row);

clearInterval(interval);

}

</script>

</body>

</html>

Try It

JavaScript Multiplication Table Program with HTML CSS

Example Multiplication table javascript user input

Multiplication table in javascript Example: Multiplication table in Range

Create an html page with the sole purpose to show multiplication tables of 2 to 10 (row-wise) created by JavaScript. initially, the page is blank. with help of set interval function print a row every 5 seconds in different colors and increasing font size.

Read More

Best JavaScript Books for Beginner and Pro