[html]
<style>
  /* НАСТРОЙКА КАРТИНОК И СТИЛЕЙ В ОДНОМ МЕСТЕ */
  :root {
    /* Ссылки на картинки (ОБЯЗАТЕЛЬНО внутри url() для CSS-content) */
    --img-free: url('https://upforme.ru/uploads/001c/99/a1/2/154925.png');
    /* Ссылка на картинку для ЗАНЯТОЙ ячейки */
    --img-busy: url('https://upforme.ru/uploads/001c/99/a1/2/160160.png');
   
   
    /* Точные размеры картинок (задайте свои, чтобы они не искажались) */
    --img-width: 80px;
    --img-height: 80px;

    /* Цвета рамок ячеек */
    --border-free: #4a90d9;
    --border-busy: #d94a4a;
  }

  .num-table {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 15px 0;
    width: 100%;
    table-layout: fixed;
  }
 
  .num-table td {
    padding: 10px 5px;
    text-align: center;
    font: bold 20px Arial, sans-serif;
    border: 2px solid var(--border-free);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    box-sizing: border-box;
  }

  /* Стилизация картинок внутри ячеек */
  .num-table td img {
    display: block;
    margin: 6px auto 0 auto; /* Размещает по центру строго под цифрой */
    width: var(--img-width);
    height: var(--img-height);
    object-fit: contain; /* Картинка не деформируется */
    content: var(--img-free); /* По умолчанию ставит свободную картинку */
  }

  /* Эффекты только для свободных ячеек */
  .num-table td:not(.busy):hover {
    transform: scale(1.03);
    border-color: #2a6fc9;
    background: #f0f6ff;
  }
  .num-table td:not(.busy):active {
    transform: scale(0.97);
    background: #d4e4ff;
  }

  /* ФЛАГ СТАТУСА "ЗАНЯТО" */
  .num-table td.busy {
    pointer-events: none; /* Отключает клики */
    border-color: var(--border-busy);
  }

  /* Автоматическая подмена картинки на занятую, если у td есть класс busy */
  .num-table td.busy img {
    content: var(--img-busy);
  }
</style>

<table class="num-table">
  <tr>
    <!-- Свободная ячейка: цифра сверху, тег img послушно берет картинку из CSS -->
    <td onclick="document.getElementById('main-reply').value='беру номер 1';">
      1
      <img>
    </td>
   
    <!-- Занятая ячейка (добавлен только флаг busy) -->
    <td class="busy" onclick="document.getElementById('main-reply').value='беру номер 2';">
      2
      <img>
    </td>
   
    <td onclick="document.getElementById('main-reply').value='беру номер 3';">3<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 4';">4<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 5';">5<img></td>
  </tr>
  <tr>
    <td onclick="document.getElementById('main-reply').value='беру номер 6';">6<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 7';">7<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 8';">8<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 9';">9<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 10';">10<img></td>
  </tr>
  <tr>
    <td onclick="document.getElementById('main-reply').value='беру номер 6';">11<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 7';">12<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 8';">13<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 9';">14<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 10';">15<img></td>
  </tr>
  <tr>
    <td onclick="document.getElementById('main-reply').value='беру номер 6';">16<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 7';">17<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 8';">18<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 9';">19<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 10';">20<img></td>
  </tr>
  <tr>
    <td onclick="document.getElementById('main-reply').value='беру номер 6';">21<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 7';">22<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 8';">23<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 9';">24<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 10';">25<img></td>
  </tr>
  <tr>
    <td onclick="document.getElementById('main-reply').value='беру номер 6';">26<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 7';">27<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 8';">28<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 9';">29<img></td>
    <td onclick="document.getElementById('main-reply').value='беру номер 10';">30<img></td>
  </tr>
  <!-- Остальные строки таблицы заполняются аналогично (просто добавляя <img> внутрь) -->
</table>

[/html]