Как разместить все стили к document.write в обном блоке?

Question

Написал простенькую программу для вывода таблицы умножения и хотел применить стили css к данной таблице в document.write(). Чтобы не "загромождать" код, хотел все стили для <table> и <td> поместить в один(тот, который самый последний) document.write(), но почему-то, когда я это делаю, все стили "слетают" кроме стилей для тега <body>. Подскажите как сделать так, чтобы этого не проиходило, если это конечно возможно.

function multiplication_table() {
   a = prompt('Enter the number of rows', '0');
   b = prompt('Enter the number of columns', '0');

   document.write('<table style="display: inline-block; align-items: center; background: #e4ecff; color: #2972d1; padding: 7px; border: 4px solid #7bb6ca; border-radius: 15px;">'); // begin of the table
   for(var row = 1; row <= a; row++)
   {
      document.write('<tr>');  // begin of row
      for(var column = 1; column <= b; column++)
      {
         document.write('<td style="min-width: 40px; width: auto; text-align: center; vertical-align: middle; border: 2px solid #bbd9ff; font-weight: 700;">' + (row*column) + '</td>');  // make cells
      }
      document.write('</tr>');  // end of row
   }
   document.write('</table>');   // end of the table

   document.write('<body style="background: #333; color: #333; font-size: 18px; text-align: center; font-family: Courier, monospace;"></body>');   // styles for document.write
}

body{
    background: #333;
    color: #fff;
    text-align: center;
    margin: 0;
}

input{
    border: none;
    outline: none;  /* clear button styles after a click */
    width: 200px;
    padding: 12px 16px;
    margin: 10px;
    color: white;
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
    background: #333;   /*#2196F3*/
    cursor: pointer;
    border: 2px solid #fff;
    border-radius: 100px;
}

input:hover{
    transition: background 0.3s ease, color 0.3s ease;
    color: #333;
    background: #fff;   /*#39a1f4*/
    box-shadow: 0px 5px 10px -5px black;
}

input:active{
    transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
    color: #000000;
    background: #d1d1d1;   /*#39a1f4*/
    border: 2px solid #d1d1d1;
    box-shadow: 0px 5px 10px -5px black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First script</title>
</head>
<body>

    <p>
        <input type='button' value='Таблица умножения' onclick='multiplication_table()'/>
    </p>

</body>
</html>

Answer 1

Судя по Вашим картинкам, Вы думаете, что если в html в произвольном месте написать

<td style="color:red;"></td>

то текст во всех ячейках таблиц на странице станет красным. Оно так не работает. А с body Вам повезло.

БЛОГ НА HUSL

Как разместить все стили к document.write в обном блоке?

Ответы (1 шт):