Форум Сайтостроение Веб-строительство

Как разместить изображение поверх и по центру таблицы?

D
На сайте с 01.09.2015
Offline
59
Digistive
338

Здравствуйте. Помогите, пожалуйста. Имеется таблица и изображение. Нужно чтобы изображение размещалось поверх таблицы и точно по центру этой таблицы.

Пример простейшей таблицы: 


     <table border="1">

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     </table>

Пример изображения: 


<img src="https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png">
sochi-russia
На сайте с 06.01.2012
Offline
183
sochi-russia
#1
Digistive:
Здравствуйте. Помогите, пожалуйста. Имеется таблица и изображение. Нужно чтобы изображение размещалось поверх таблицы и точно по центру этой таблицы.

Пример простейшей таблицы: 


     <table border="1">

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     <tr>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     <td>ячейка</td>

     </tr>

     </table>


Пример изображения: 


<img src="https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png">

Это как поверх, непонятно

https://clck.ru/Rk2P5 Сервера, конфигуратор тарифов VPS | Авиабилеты дешево https://avia-avia.ru . | Супер Хостинг от 9,20 руб в день https://clck.ru/Rk2P5 🖧 VPS от 19 руб. https://clck.ru/afhGc 🖧 Выделенные СЕРВЕРЫ - БЕСПЛАТНЫЕ плюшки https://clck.ru/YhkZe 🖧 / / Хостинг от 6руб в день! https://clck.ru/Rk2P5
S
На сайте с 30.09.2016
Offline
469
Sitealert
#2
sochi-russia:
Это как поверх, непонятно

Типа абсолютного позиционирования. У студента занятия по жабаскрипту закончились, теперь CSS проходит.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
ArbNet
На сайте с 27.10.2019
Offline
124
ArbNet
#3 


<table border="1" width=50% align=center>
     <caption>
          <img src="https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png">
     </caption>
     <tr>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     </tr>
     <tr>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     </tr>
     <tr>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     </tr>
     <tr>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     </tr>
     <tr>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     <td>ячейка</td>
     </tr>
</table>

🤪

Обсуждение разработки на моём фреймворке https://discord.gg/23N4s9x2kp
S
На сайте с 30.09.2016
Offline
469
Sitealert
#4
ArbNet:
🤪

Пожалуй, процитированная часть – наиболее уместная.

[Удален]
#5
Sitealert:
Пожалуй, процитированная часть – наиболее уместная.

Смайлики вообще нужно запретить!

Ведь все серьёзные переписки и документы прекрасно обходятся без них.

D
На сайте с 01.09.2015
Offline
59
Digistive
#6
sochi-russia:
Это как поверх, непонятно

Вот так - https://prnt.sc/qttk0e

ArbNet
На сайте с 27.10.2019
Offline
124
ArbNet
#7 


<!DOCTYPE HTML>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> 
</head>
<style>
.case1 {
     width: 700px;
     height: 500px;
     margin: 0 auto;
     position: relative;
}
.tabl {
     width: 100%;
     height: 100%;
}
.case2{
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     position: absolute;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
}
.sova {
     flex: 0 0 auto;
}
</style>
<body>
<div class=case1>
     <table border="1" class=tabl>
          <tr>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
          </tr>
          <tr>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
          </tr>
          <tr>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
          </tr>
          <tr>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
          </tr>
          <tr>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
               <td>ячейка</td>
          </tr>
     </table>
     <div class=case2>
          <img class=sova src="https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png">
     </div>
</div>
</body> 
</html>

🤣

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий