JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container">
<h1 class="text-center">Таблица умножения</h1>
<div class="table-multi">
</div>
</div>
CSS
.container {
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
.table-multi {
background: #f7f7f7;
display: flex;
flex-wrap: wrap;
}
.table-multi__column {
border: 1px solid #ccc;
padding: 25px;
text-align: center;
width: 20%;
}
JavaScript
(function() {
"use strict";
function tableMultiplication() {
var promptCount = +prompt('Введите количество колонок для таблицы умножения', ''); // '+' value prompt string to number
var count = promptCount;
if (promptCount === null || promptCount <= 0 || promptCount === '') {
alert('Введите корректное число')
var promptCount = prompt('Введите количество колонок для таблицы умножения', '');
}
var tableMulti = document.querySelector('.table-multi');
var tableMultiColumn;
var tableMultiCell;
// colums
for (var i = 1; i <= count; i++) {
// create columns
tableMultiColumn = document.createElement('div');
tableMultiColumn.className = 'table-multi__column';
// put columns to table
tableMulti.appendChild(tableMultiColumn);
// cells
for (var j = 1; j <= 10; j++) {
// create cells
tableMultiCell = document.createElement('div');
tableMultiCell.className = 'table-multi__cell';
// put cells to column
tableMultiColumn.appendChild(tableMultiCell);
// output cells html
tableMultiCell.innerHTML = i + '*' + j + '=' + i * j;
}
}
}
tableMultiplication();
})();