[html]
<style>
/*вся таблица*/

#box { 
width: 600px;
background: #d8dedf;
height: 400px;
position: relative;
margin: 50px;
border: 1px solid #8a1e17;
outline: 1px solid #8a1e17;
color: #191919;
line-height: 170%;
font-size: 11px;
}

/*изображение*/
#box picture {
height: 400px;
width: 150px;
position: absolute;
left: 0px;
top: 0px;
background-size: cover;
display: block;
border-right: 1px solid #8a1e17;
}

/*информация*/
#box infobox {
width: 400px;
height: 360px;
position: absolute;
top: 20px;
right: 20px;
overflow: auto;
font-size: 13px;
line-height: 170%;
text-align: justify;
padding-right: 5px;
color: #191919;
display: block;
}

/*заголовки*/
#name h1 {
color: #272d52;             
position: relative;
font-size: 20px;
text-transform: uppercase;
font-family: Fixedsys;
display: block;
width: auto;
text-align: right;
font-weight: 900;
margin:10px 0px;
border-bottom: 1px solid #bababa;
}

#box data {
font-size: 10px;
font-style: oblique;
}

#box a {
color: #000;
font-weight: 700;
text-decoration: none;
}

#box infobox::-webkit-scrollbar{width:2px}
#box infobox::-webkit-scrollbar-thumb{border:none!important;background:#bababa!important}
#box infobox::-webkit-scrollbar-track{background:none!important;border:none!important}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #c9d4d6;

}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 7px 32px;
    transition: 0.3s;
    font-size: 17px;
font-family: Book Antiqua;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
</style>

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

<link rel="stylesheet" type="text/css" href="table.css">
<div id="name"> <h1>такойсеберолевик</h1> </div>
<div id="box">

<picture style="background-image: url(https://i.ibb.co/n73pCTm/171-X71n.png)"></picture>

<infobox>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">активные</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">архив</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">брошено</button>
</div>

<div id="London" class="tabcontent">
  <p>
<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> -  шаблон спижжен
<br> <br>

<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> -  шаблон спижжен
<br> <br>

<data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> -  реально спижжен
<br> <br>
</p>
</div>

<div id="Paris" class="tabcontent">
  <p><data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> -  тут все спижжено нахуй
<br> <br></p>
</div>

<div id="Tokyo" class="tabcontent">
  <p><data> дата | имя </data> <br>
<a href="https://ссылка">эпизод </a> -  жулик не воруй
<br> <br></p>
</div>

</infobox>
</div>
[/html]