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

Digistive

27 января 2020, 18:52

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

27 января 2020, 19:27

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">

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

Sitealert

27 января 2020, 19:30

sochi-russia:
Это как поверх, непонятно

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

ArbNet

27 января 2020, 19:44


<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>

🤪

Sitealert

27 января 2020, 20:06

ArbNet:
🤪

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

[Удален]

27 января 2020, 21:02

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

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

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

Digistive

28 января 2020, 05:19

sochi-russia:
Это как поверх, непонятно

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

ArbNet

28 января 2020, 07:04


<!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>

🤣

Похожие записи:

Добавить комментарий Отменить ответ