Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			box-sizing: border-box;
		}
		.table {
			width: 500px;
			border: 1px solid rgba(0,0,0,.3);
			margin: auto;
		}
		.table__row {
			height: 50px;
			text-align: center;
		}
		.table__col {
			width: 45px;
			height: 45px;
			display: inline-block;
			margin: 2px;
			background-color: blue;
		}
		.table__col.marked {
			background-color: red;
		}
	</style>

</head>
<body>
	<div id="table" class="table"></div>
<script>
	(function () {
		let cnt = 0;
		const col = 10;
		const row = 10;
		const tblBlock = document.querySelector("#table");

		for (let i = 0; i < col; i++)
		{
			let rowBlock = document.createElement("div");
			rowBlock.className = "table__row";

			tblBlock.append(rowBlock);
			for (let j = 0; j < row; j++)
			{
				let colBlock = document.createElement("div");
				colBlock.className = "table__col";

				cnt++;

				if ( cnt % 3 === 0) {
					colBlock.classList.add("marked");
				}


				rowBlock.append(colBlock);
			}
		}
	})();
</script>
</body>
</html>