тест таблицы

Умения
[html]
<style type="text/css">
.ppage {
display: block;
background: url('https://forumupload.ru/uploads/001b/b3/f0/2/507587.png');
width:720px;
height:460px;
}

.plashki {
display: block;
width: 212px;
position: absolute;
margin-left: 485px;
margin-top: 69px;
height: 306px;
padding: 10px 0px;
overflow-y: scroll;
}

.podarki {
display: block;
width: 212px;
position: absolute;
margin-top: 75px;
margin-left: 23px;
overflow-y: scroll;
height: 310px;
}

.podarkitable {
display: flex;
align-items: center;
gap: 5px;
color: #82adb1;
font-family: verdana;
font-size: 9px;
}

.podarkitable img {
width: 78px;
filter: grayscale(0.5);
opacity: 0.5;
transition: all 0.3s;
}

.podarkitable img:hover {
filter: grayscale(0);
opacity: 1;
}

.podarkidesc {
display: grid;}
.podarkidesc h1 { text-transform: uppercase;
font-weight: bold;}

.plashki .pl {
margin-left: 2px !important;
width: 207px;
filter: grayscale(0.5);
opacity: 0.5;
transition: all 0.3s;
margin-bottom: 11px;
}

.plashki .pl:hover {
filter: grayscale(0);
opacity: 1;
}

.plashki .pik {
margin-left: 7px !important;
}

.achivki {
position: absolute;
width: 212px;
margin-left: 252px;
margin-top: 75px;
overflow-y: scroll;
text-align: center;
}

.achivkigrid img {
width: 67px;
filter: brightness(0.5);
opacity: 0.5;
transition: all 0.3s;
}
.achivkigrid img:hover {
filter: brightness(1);
opacity: 1;
}

</style>
<div class="ppage">
.
<div class="podarki">

<div class="podarkitable">
<img src="https://i.imgur.com/nXLnl0l.png">
<div class="podarkidesc">
<h1>Винил Never Fade Away</h1>
<h2>Описание подарочка и пожелания</h2>
</div> </div>

<div class="podarkitable">
<img src="https://i.imgur.com/S0l50Z3.png">
<div class="podarkidesc">
<h1>Винил Never Fade Away</h1>
<h2>Описание подарочка и пожелания</h2>
</div> </div>

<div class="podarkitable">
<img src="https://i.imgur.com/rc50qYd.png">
<div class="podarkidesc">
<h1>Винил Never Fade Away</h1>
<h2>Описание подарочка и пожелания</h2>
</div> </div>

<div class="podarkitable">
<img src="https://i.imgur.com/7O8AXi1.png">
<div class="podarkidesc">
<h1>Винил Never Fade Away</h1>
<h2>Описание подарочка и пожелания</h2>
</div> </div>

<div class="podarkitable">
<img src="https://i.imgur.com/nXLnl0l.png">
<div class="podarkidesc">
<h1>Винил Never Fade Away</h1>
<h2>Описание подарочка и пожелания</h2>
</div> </div>

</div>

</div>

<div class="plashki">
<div class="pl"><img src="https://forumupload.ru/uploads/001b/b3/f0/2/184960.png" onclick="iconRedir(this)" class="pik"><tp>a thing of beauty</tp><btm>will never fade away</btm></div><a href=#tid=19></a>
<div class="pl"><img src="https://forumupload.ru/uploads/001b/b3/f0/2/184960.png" onclick="iconRedir(this)" class="pik"><tp>a thing of beauty</tp><btm>will never fade away</btm></div><a href=#tid=19></a>
<div class="pl"><img src="https://forumupload.ru/uploads/001b/b3/f0/2/184960.png" onclick="iconRedir(this)" class="pik"><tp>a thing of beauty</tp><btm>will never fade away</btm></div><a href=#tid=19></a>
<div class="pl"><img src="https://forumupload.ru/uploads/001b/b3/f0/2/184960.png" onclick="iconRedir(this)" class="pik"><tp>a thing of beauty</tp><btm>will never fade away</btm></div><a href=#tid=19></a>
<div class="pl"><img src="https://forumupload.ru/uploads/001b/b3/f0/2/184960.png" onclick="iconRedir(this)" class="pik"><tp>a thing of beauty</tp><btm>will never fade away</btm></div><a href=#tid=19></a>
<div class="pl"><img src="https://forumupload.ru/uploads/001b/b3/f0/2/184960.png" onclick="iconRedir(this)" class="pik"><tp>a thing of beauty</tp><btm>will never fade away</btm></div><a href=#tid=19></a>
<div class="pl"><img src="https://forumupload.ru/uploads/001b/b3/f0/2/184960.png" onclick="iconRedir(this)" class="pik"><tp>a thing of beauty</tp><btm>will never fade away</btm></div><a href=#tid=19></a>
<div class="pl"><img src="https://forumupload.ru/uploads/001b/b3/f0/2/184960.png" onclick="iconRedir(this)" class="pik"><tp>a thing of beauty</tp><btm>will never fade away</btm></div><a href=#tid=19></a>
</div>
</div>

[/html]