[html]<style>
  .custom-html-container {
    width: 100%;
    height: auto;
    overflow: auto;
  }

  .table-container {
    width: 100%;
    border: none;
  }

  .table-container td {
    padding: 8px;
    border: none;
    text-align: center;
    vertical-align: middle; /* Центрируем по вертикали */
    height: auto;
    word-wrap: break-word;
  }

  .table-container .table-header {
    background-color: #171b1c;
    color: #c9c5b8;
    font-family: Arial Black;
    font-size: 16px;
    text-align: center;
  }

  .table-container .twinks {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap; /* Для мобильных устройств */
  }

  .twink-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100px;
    height: auto;
    width: 80px; /* Ограничиваем ширину каждого элемента */
    margin: 5px; /* Добавляем отступы между элементами */
  }

  .twink-image {
    width: 70px;
    height: 70px;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
    background-size: cover;
  }

  .twink-name {
    font-style: italic;
    margin-top: 5px;
    font-size: 10px;
    font-weight: normal;
  }

  @media (max-width: 540px) {
    .table-container .twinks {
      flex-direction: column; /* Вертикальная ориентация на маленьких экранах */
      align-items: center;
    }

    .twink-item {
      width: 100%; /* Растягиваем на всю ширину */
    }

    .twink-name {
      font-size: 12px; /* Можно чуть увеличить текст */
    }
  }
</style>

<div class="custom-html-container">
  <div class="table-container">
    <table style="width:100%">
      <col style="width:30%">
      <col style="width:70%">
      <tr>
        <td class="table-header" colspan="1">Главный аккаунт</td>
        <td class="table-header" colspan="2">Твинки</td>
      </tr>
      <tr>
        <td class="main-account" style="text-align: center;">
          <div class="twink-item" style="display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 100px;"> <!-- Добавлено для центрирования -->
            <a href="https://rndetre.rusff.me/profile.php?id=3">
              <div class="twink-image" style="background-image:url(https://forumupload.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
            </a>
            <div class="twink-name">Главный персонаж</div>
          </div>
        </td>
        <td class="twinks">
          <div class="twink-item">
            <a href="ссылка2">
              <div class="twink-image" style="background-image:url(https://forumupload.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
            </a>
            <div class="twink-name">Персонаж 1</div>
          </div>
          <div class="twink-item">
            <a href="ссылка3">
              <div class="twink-image" style="background-image:url(https://forumupload.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
            </a>
            <div class="twink-name">Персонаж 2</div>
          </div>
          <div class="twink-item">
            <a href="ссылка4">
              <div class="twink-image" style="background-image:url(https://forumupload.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
            </a>
            <div class="twink-name">Персонаж 3</div>
          </div>
          <div class="twink-item">
            <a href="ссылка5">
              <div class="twink-image" style="background-image:url(https://forumupload.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
            </a>
            <div class="twink-name">Персонаж 4</div>
          </div>
          <div class="twink-item">
            <a href="ссылка6">
              <div class="twink-image" style="background-image:url(https://forumupload.ru/uploads/001c/0c/35/2/356102.jpg)"></div>
            </a>
            <div class="twink-name">Персонаж 5</div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>
[/html]

КОД НА ДОБАВЛЕНИЕ ВПЕРВЫЕ С ОДНИМ ТВИНКОМ

[html]<style>
  .custom-html-container {
    width: 100%;
    height: auto;
    overflow: auto;
  }

  .table-container {
    width: 100%;
    border: none;
  }

  .table-container td {
    padding: 8px;
    border: none;
    text-align: center;
    vertical-align: middle; /* Центрируем по вертикали */
    height: auto;
    word-wrap: break-word; 
  }

  .table-container .table-header {
    background-color: #171b1c;
    color: #c9c5b8;
    font-family: Arial Black;
    font-size: 16px;
    text-align: center;
  }

  .table-container .twinks {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap; /* Для мобильных устройств */
  }

  .twink-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100px;
    height: auto;
    width: 80px; /* Ограничиваем ширину каждого элемента */
    margin: 5px; /* Добавляем отступы между элементами */
  }

  .twink-image {
    width: 70px;
    height: 70px;
    margin: 5px;
    border-radius: 50%;
    cursor: pointer;
    background-size: cover;
  }

  .twink-name {
    font-style: italic;
    margin-top: 5px;
    font-size: 10px;
    font-weight: normal;
  }

  @media (max-width: 540px) {
    .table-container .twinks {
      flex-direction: column; /* Вертикальная ориентация на маленьких экранах */
      align-items: center;
    }

    .twink-item {
      width: 100%; /* Растягиваем на всю ширину */
    }

    .twink-name {
      font-size: 12px; /* Можно чуть увеличить текст */
    }
  }
</style>

<div class="custom-html-container">
  <div class="table-container">
    <table style="width:100%">
      <col style="width:30%">
      <col style="width:70%">
      <tr>
        <td class="table-header" colspan="1">Главный аккаунт</td>
        <td class="table-header" colspan="2">Твинки</td>
      </tr>
      <tr>
        <td class="main-account" style="text-align: center;">
          <div class="twink-item" style="display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 100px;"> <!-- Добавлено для центрирования -->
            <a href="ССЫЛКА НА ПРОФИЛЬ ГЛАВНОГО ПЕРСОНАЖА">
              <div class="twink-image" style="background-image:url(ССЫЛКА НА КАРТИНКУ! НЕ СТАВЬТЕ ССЫЛКУ С АВАТАРА, ПРИ СМЕНЕ ИСЧЕЗНЕ)"></div>
            </a>
            <div class="twink-name">ИМЯ ГЛАВНОГО ПЕРСОНАЖА</div>
          </div>
        </td>
        <td class="twinks">
          <div class="twink-item">
            <a href="ССЫЛКА НА ПРОФИЛЬ ПЕРСОНАЖА 1">
              <div class="twink-image" style="background-image:url(ССЫЛКА НА КАРТИНКУ! НЕ СТАВЬТЕ ССЫЛКУ С АВАТАРА, ПРИ СМЕНЕ ИСЧЕЗНЕ)"></div>
            </a>
            <div class="twink-name">ИМЯ ПЕРСОНАЖА 1</div>
          </div>
       <!-- Добавляем ещё ячеек с новой строки-->

        </td>
      </tr>
    </table>
  </div>
</div>
[/html]

КОД НА ДОБАВЛЕНИЕ ДОПОЛНИТЕЛЬНЫХ ТВИНОВ
вставляем после фразы  <!-- Добавляем ещё ячеек с новой строки--> столько раз, сколько нужно ячеек. Код обязательно должен закрывать [/html]

          <div class="twink-item">
            <a href="ССЫЛКА НА ПРОФИЛЬ ПЕРСОНАЖА 2/3/4 И Т.Д.">
              <div class="twink-image" style="background-image:url(ССЫЛКА НА КАРТИНКУ! НЕ СТАВЬТЕ ССЫЛКУ С АВАТАРА, ПРИ СМЕНЕ ИСЧЕЗНЕТ)"></div>
            </a>
            <div class="twink-name">ИМЯ ПЕРСОНАЖА 2/3/4 И Т.Д.</div>
          </div>