isnifer/pifagor.html

## pifagor.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pifagor</title>
    <style>

        body{
            margin: 0;
            padding: 50px;
            font-size: 18px;
        }

        table{
            width: 600px;
            border-collapse: collapse;
            border-spacing: 0;
            text-align: center;
        }

        table tr:nth-child(2n){
            background: #c7c7c7;
        }

        table tr:first-child{
            border-bottom: 1px solid #000;
        }

        table td:first-child{
            border-right: 1px solid #000;
        }

        table td{
            padding: 10px;
        }

        p{
            margin: 10px 0 0;
            font-family: Georgia;
        }

    </style>
</head>
<body>

    <div>
        <p>Высота таблицы</p>
        <input type="text" class="vertical">
    </div>
    <div>
        <p>Ширина таблицы</p>
        <input type="text" class="horizontal">
    </div>

    <table id="pifagor">
        <tbody>

        </tbody>
    </table>

    <script>

        var table = document.querySelector('#pifagor tbody'),
            vertical = document.querySelector('.vertical'),
            horizontal = document.querySelector('.horizontal');

        function createTable () {
            table.innerHTML = '';

            var i = 1,
                j = 1,
                h = vertical.value || 10,
                w = horizontal.value || 10,
                td, tr;

            for (i; i <= h; i++) {
                tr = document.createElement('tr');
                for (j; j <= w; j++) {
                    td = document.createElement('td');
                    td.textContent = i * j;
                    tr.appendChild(td);
                }
                table.appendChild(tr);
                j = 1;
            }
        }

        vertical.addEventListener('change', createTable);
        horizontal.addEventListener('change', createTable);

    </script>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Pifagor</title>
	<style>

	body{
	margin: 0;
	padding: 50px;
	font-size: 18px;
	}

	table{
	width: 600px;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: center;
	}

	table tr:nth-child(2n){
	background: #c7c7c7;
	}

	table tr:first-child{
	border-bottom: 1px solid #000;
	}

	table td:first-child{
	border-right: 1px solid #000;
	}

	table td{
	padding: 10px;
	}

	p{
	margin: 10px 0 0;
	font-family: Georgia;
	}

	</style>
	</head>
	<body>

	<div>
	<p>Высота таблицы</p>
	<input type="text" class="vertical">
	</div>
	<div>
	<p>Ширина таблицы</p>
	<input type="text" class="horizontal">
	</div>

	<table id="pifagor">
	<tbody>

	</tbody>
	</table>

	<script>

	var table = document.querySelector('#pifagor tbody'),
	vertical = document.querySelector('.vertical'),
	horizontal = document.querySelector('.horizontal');

	function createTable () {
	table.innerHTML = '';

	var i = 1,
	j = 1,
	h = vertical.value \|\| 10,
	w = horizontal.value \|\| 10,
	td, tr;

	for (i; i <= h; i++) {
	tr = document.createElement('tr');
	for (j; j <= w; j++) {
	td = document.createElement('td');
	td.textContent = i * j;
	tr.appendChild(td);
	}
	table.appendChild(tr);
	j = 1;
	}
	}

	vertical.addEventListener('change', createTable);
	horizontal.addEventListener('change', createTable);

	</script>

	</body>
	</html>