/ February 27, 2023

Print a 10×10 multiplication table

JavaScript | Easy

Task:
Create a 10x10 multiplication table that goes from 0 to 10. The table needs to be neatly formatted/aligned.

Bonus:
highlight the header row and column.

My Solution

Please take a moment and try to solve the challenge. If you are stuck, or when you are done, come back any time and see how I did it.

<div id="mtable"></div>

table {
	width: 100%;
}

table td {
	width: 9%;
	text-align: right;
	padding: 5px;
}

table td.header {
	background-color: #ccc;
}

let mtable = document.querySelector("#mtable");
let outstring = "<table>";

for (x=0; x<=10; x++) {
	outstring += "<tr>";
	for (y=0; y<=10; y++) {
	
	if (x*y===0) {
		outstring += "<td class='header'>";
	} else {
		outstring += "<td>";
	}
	
	outstring += x*y + "</td>";
	}
	outstring += "</tr>"
}

outstring += "</table>";

mtable.innerHTML = outstring;