<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<script>
var table = document.createElement('table');
var TableContent = '<thead> \
<tr> \
<th>№</th> \
<th>Жёлтый</th> \
<th>Оранжевый</th> \
<th>Розовый</th> \
<th>Красный</th> \
<th>Зелёный</th> \
<th>Чёрный</th> \
<th>Голубой</th> \
<th>Синий</th> \
</tr> \
</thead>';
TableContent += '<tfoot><tr><td colspan="9"><button id="readyButton">Готово!</button></td></tr></tfoot>';
for (var i = 0; i <20; i++) {
TableContent += '<tr> \
<td>' + (i + 1) + '</td> \
<td><input type="radio" name="' + 'radio' + i + '"value="yellow" /></td> \
<td><input type="radio" name="' + 'radio' + i + '"value="orange" /></td> \
<td><input type="radio" name="' + 'radio' + i + '"value="hotPink" /></td> \
<td><input type="radio" name="' + 'radio' + i + '"value="red" /></td> \
<td><input type="radio" name="' + 'radio' + i + '"value="green" /></td> \
<td><input type="radio" name="' + 'radio' + i + '"value="black" /></td> \
<td><input type="radio" name="' + 'radio' + i + '"value="deepSkyBlue" /></td> \
<td><input type="radio" name="' + 'radio' + i + '"value="mediumBlue" /></td> \
</tr>';
}
table.innerHTML = TableContent
document.body.appendChild(table)
</script>
</body>
</html>