Каждая тема в форуме дом.инфа — для создания таблички конкретному юзеру.
Каждый пост этой темы, начиная с первого — будет вкладкой таблицы, если:
Если он начинается с названия вкладки, вписанное в самое начало сообщение BB-тегом [mark] (маркирующий текст, см расширение под иконкой «треугольничек»). Со следующей строки такого сообщения — идёт наш контент вкладки.
Сообщения-Вкладки должны идти друг за другом, начиная с первого поста, кол-во вкладок будет равно кол-ву заголовков в тегах mark, после нахождения сообщения без тега mark в первой строке, скрипт считает, что вкладки исчерпаны.

Как устанавливается табличка в профиль:
2. В доп. поле профиля нового игрока суём ссылку на тему с вкладками таблицы таким кодом:
<a href=#tid=39><img src="https://forumupload.ru/uploads/001c/3b/0e/3/469715.png" onclick="iconRedir(this)></a>
Где красная цифра 39 — ID темы будущей таблички.
Заходим в нужную тему и смотрим ссылку в адресном окне браузера:
http://timelife.0pk.ru/viewtopic.php?id=39

первое сообщение
Код:
[mark]инфо[/mark][html]<style> 


    /* основа */
         .infa {
width: 710px;
height: 500px;
background-color: #9b9b9b;
border-radius: 20px;
margin: 5px auto;
        }

    /* вверхний блок */
        .hader {
            padding: 20px;
            display: flex;
            text-align: justify;
        }
    
        .hader img {
            width: 200px;
            border-radius: 100px;
            margin-right: 30px;
            }
    
        .hader span {
            margin-top: 30px;
    
        }
        .hader b {
            text-transform: uppercase;
            font-size: 30px;
        }
    
    
    /* ссылки */
        .but {
           
            padding: 0px 20px;
            display: grid;
grid-auto-flow: column;
grid-column-gap: 10px
        }
    
        .but a{
            text-decoration: none;
    background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    padding: 10px 32px;
    color: black;
    margin: 0px 6px;
            
        }
    
        .r a{

            padding: 10px 90px;
            margin: 0px 10px;
        }
    
        .r, .l {
            width: 50%;
            display: flex;
  /* align-items: center;
  justify-content: center; */
        }
    
    /* центр - цитаты и отношения */
        .cent {
            display: flex;
        }
    
        .qtat {
            width: 50%;
            padding: 10px 20px;
            text-align: justify;
        }
    
        .otp {
            width: 50%;
            
        }
    
        .otp div{
            display: flex;
            padding: 5px 0px;
        }
    
        .otp img {
            width: 80px;
            height: 80px;
            border-radius: 100px;
        }
    
        .otp p {
            padding-left: 10px;
        }

    /* подарки и награды */
    .podar, .ziv {
            width: 50%;
            display: flex;
            /* align-items: center;
            justify-content: center; */
        }
    
    
    
        .cat {
            margin: 10px 35px;
            background-color: white;
            border: 2px solid black;
            border-radius: 10px;
            padding: 10px 30px;
            color: black;
            text-align: center;
        }
    
        .dar {
            margin: 10px 20px;
            overflow-y: scroll; 
            height: 100px;
            width: 50%;
        }
        
        .pla {
            margin: 10px 20px;
            overflow-y: scroll; 
            height: 100px;
        }

        .but t{
            text-decoration: none;
            background-color: white;
            border: 2px solid black;
            border-radius: 10px;
            padding: 10px 100px;
            margin: 0px 10px;
            color: black;
            
        }
 /* скроллы*/
    .dar::-webkit-scrollbar,
    .pla::-webkit-scrollbar {
            width: 3px;
        }
    
    .dar::-webkit-scrollbar-track ,
    .pla::-webkit-scrollbar-track  {
        -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
        background-color: #f9f9fd;
        border-radius: 10px;
    }
    
    .dar::-webkit-scrollbar-thumb,
    .pla::-webkit-scrollbar-thumb{
        border-radius: 10px;
        background: linear-gradient(180deg, #00c6fb, #005bea);
    }
    
    
 
    
    </style>

СЮДА КОД, КОТОРЫЕ ЗАПОЛНИЛИ ИГРОКИ
[/html]
код для второго сообщение. ачивки
Код:
[mark]ачивки[/mark][html]<style> 

/* основа */
.infa {
width: 710px;
height: 500px;
background-color: #9b9b9b;
border-radius: 20px;
}

    
    /* ссылки */
        .but {
    padding: 15px 30px;
    display: grid;
    grid-auto-flow: column;
    grid-column-gap: 30px;
        }


    /* центр - цитаты и отношения */
        .cent {
            display: flex;
        }
    
        .qtat {
            width: 50%;
            padding: 10px 20px;
            text-align: justify;
        }
    
        .otp {
            width: 50%;
            
        }
    
        .otp div{
            display: flex;
            padding: 5px 0px;
        }
    
        .otp img {
            width: 80px;
            height: 80px;
            border-radius: 100px;
        }
    
        .otp p {
            padding-left: 10px;
        }

    /* подарки и награды */
    .podar, .ziv {
            width: 50%;
            display: flex;
            /* align-items: center;
            justify-content: center; */
        }
    
    
    
        .cat {
            margin: 10px 35px;
            background-color: white;
            border: 2px solid black;
            border-radius: 10px;
            padding: 10px 30px;
            color: black;
            text-align: center;
        }
    
        .dar {
            margin: 10px 20px;
            overflow-y: scroll; 
            height: 200px;
            width: 50%;
        }
        
        .pla {
            margin: 10px 20px;
            overflow-y: scroll; 
            height: 120px;
        }

        .but t{
            text-decoration: none;
            background-color: white;
            border: 2px solid black;
            border-radius: 10px;
            padding: 10px 100px;
            margin: 0px 10px;
            color: black;
            
        }
 /* скроллы*/
    .dar::-webkit-scrollbar,
    .pla::-webkit-scrollbar {
            width: 3px;
        }
    
    .dar::-webkit-scrollbar-track ,
    .pla::-webkit-scrollbar-track  {
        -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
        background-color: #f9f9fd;
        border-radius: 10px;
    }
    
    .dar::-webkit-scrollbar-thumb,
    .pla::-webkit-scrollbar-thumb{
        border-radius: 10px;
        background: linear-gradient(180deg, #fb0000, #830000);
    }
    
    
 
    .tooltip_2 img {
    width: 90px;
    }
         
   /* подсказки */  
    span.tooltip_2 {
      position: relative;
      display: inline-block;
      color: red;
      cursor: pointer;
    
    }
    .tooltip_link {
      display: none;
    }
    span.tooltip_2:hover .tooltip_link {
      display: block;
      position: absolute;
      width: 80px;
      color: #fff;
      background: rgba(0,0,0,0.5);
      padding: 8px 10px;
      border-radius: 4px;
      top: 70px;
      z-index: 1;
    }
    
    
    </style>
    <div class="infa">
    
    
    <div class="but">
    <div class="podar"> <t> достижения </t></div>  <div class="ziv"><t>подарки </t> </div></div>

    <div class="cent">

        <div class="dar"> 


        </div>
    
        <div class="dar"> 


        </div>
    </div>
    
        <div class="cat"> плашки </div>
        <div class="pla"> 
<img src="https://forumupload.ru/uploads/001c/29/ca/3/t290168.png">

        </div>

    
    </div>[/html]

код для добавлении подарков и ачивок

Код:
    <span class="tooltip_2"><span class="tooltip_link">подсказка со ссылкой </span>
    <div class="mask mask-four mask-four-frame"><img src="https://forumupload.ru/uploads/001c/29/ca/3/t721585.png" class="mask-img" alt="">
    </div></span>