Как вставить картинку в таблицу в html

Как вставить картинку в табличную верстку?

Нужна верстка эмэйл письма,знаю,что там используется табличная верстка и стили в тегах. Нужно сделать так,как на приложенной картинке, а пока нету вообще идей у меня как такое можно сделать.
Мой код на данный момент:

но этот код вставляет картинку в тд,тоесть в ячейку таблицы.

• Вопрос задан более трёх лет назад
• 3689 просмотров

Комментировать

Решения вопроса 0

Ответы на вопрос 2

Виктор Янышев @villiwalla

Картинку в ячейку в таблицы

Как в ячейку таблицы вставить картинку, не залить полную ячейку фоновым изображением а вставить с позиционированием?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как растянуть картинку на всю ячейку таблицы?
Делаю вот так, но по ширине растягивается, а по высоте нет. Хотелось бы на всю площадь ячейки.

HTML — Надо: вставить картинку в картинку, в эту картинку, ссылку в картинку
Вот схема моего сайта. http://s020.***********/i716/1404/8c/254516feacb3.jpg У меня пока что на.

Ограничить вывод в ячейку таблицы
Есть таблица. В поле вводится текстовое значение. Если текстовое значение короткое, то ширина .

Опустить кнопку и текст в ячейку таблицы
Она оранжевого цвета в верхнем правом углу.Ее нужно опустить на шапку шайта.Делал верстку блочно.

Регистрация: 02.11.2011
Сообщений: 193

img src=''>

Вам в помощь
Регистрация: 01.12.2011
Сообщений: 26
не реагирует на меня
Регистрация: 02.11.2011
Сообщений: 193

Выложите фрагмент кода что-ли, где именно у Вас проблема.

Регистрация: 01.12.2011
Сообщений: 26
например,header:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

table border="1" cellspacing="0" cellpadding="0" width ="1220" align="center"> tr>td colspan="3" background="https://www.cyberforum.ru/images/header.gif" height="111" align="center" valign="top">/td> /tr> tr>td colspan="3" background="https://www.cyberforum.ru/images/kon2.png" height="393" align="center" valign="top">/td>/tr> tr background="https://www.cyberforum.ru/images/seredina.png"> td width="370"> /td> td width="460">/td> td width="375">img src="https://www.cyberforum.ru/images/abc.png">/td> img src="/images/Kontaktu_2.png" style="margin-top:-20px;" /> /tr>

footer все закрывается)
и в стилях

1 2 3 4 5 6

img.abc{ position: absolute; top: 458px; left: 592px; line-height: 1px; }

Регистрация: 02.11.2011
Сообщений: 193

1) Стили можно убрать. Если я правильно понимаю то, что требуется — это не нужно.
2) попробуйте прописать им еще width и height.
3) Не забывайте код брать на форуме в соответствующие теги.
4) вы забыли взять картинку kontaktu_2.png в тег

td>/td>

Добавлено через 27 секунд
Или лучше добавьте картинкам в стилях

margin: 5px;

Регистрация: 01.12.2011
Сообщений: 26
мне в стилях прописывать надо.
width и height не помогает
Регистрация: 02.11.2011
Сообщений: 193

Посмотрите через firebug правильно ли указан адрес? И где отображается элемент (или хотя бы его место)
Почему Вам необходимо использовать стили? В данном случае, вы указываете, что изображение будет находится на 500 пикселей ниже и 600 пикселей правей левого верхнего угла ячейки.
Упс, пардон, не в этом случае. Вот если уберете класс, то тогда да, будет смещаться так и на столько.
Кроме того, lineHeight вообще не уверен что нужен. На сколько помню, он применяется только к тексту, Вы же применяете его к изображению.
Ну и последнее. Позиционирование в ячейке лучше было бы сделать через margin, а не через position.

Регистрация: 18.12.2011
Сообщений: 101
Последняя картинка у вас вне ячейки, но в строке — вот и глючит) вокруг нее воткните)
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Вставить в ячейку таблицы HTML-документ
как вставить в ячейку таблицы документ, не используя при этом фреймы при вставке фреймом.

Как сделать ячейку таблицы фиксированного размера, вне зависимости от контента
Вот есть некая разметка таблицы. Она предназначена чтобы на сайте было справа типо ссылки всякие, а.

Как вставить картинку в таблицу в html

(ordered list), ненумерованные — тегом
(unordered list). В обоих случаях элементы списка задаются тегом
(list item):

1. Пешеходы составляют большую часть человечества. Мало того — лучшую его часть. Пешеходы создали мир. ​
2. Автомобиль тоже был изобретён пешеходами. Но автомобилисты об этом как-то сразу забыли. Кротких и умных пешеходов стали давить. Улицы, созданные пешеходами, перешли во власть автомобилистов. ​
3. В большом городе пешеходы ведут мученическую жизнь. Для них ввели некое транспортное гетто. Пешеходам разрешают переходить улицы только на перекрёстках, то есть именно в тех местах, где движение сильнее всего и где волосок, на котором обычно висит жизнь пешехода, легче всего оборвать. ​
4. Если пешеходу иной раз удаётся выпорхнуть из-под серебряного носа машины — его штрафует милиция за нарушение правил уличного катехизиса.

• зицпредседатель Фунт;
• управляющий отделением Остап Бендер;
• уполномоченный по рогам и копытам Шура Балаганов;
• курьер Михаил Самуэлевич Паниковский.

Четыре факта о пешеходах, которые необходимо помнить автомобилистам:

Пешеходы составляют большую часть человечества. Мало того — лучшую его часть. Пешеходы создали мир. Автомобиль тоже был изобретён пешеходами. Но автомобилисты об этом как‑то сразу забыли. Кротких и умных пешеходов стали давить. Улицы, созданные пешеходами, перешли во власть автомобилистов. В большом городе пешеходы ведут мученическую жизнь. Для них ввели некое транспортное гетто. Пешеходам разрешают переходить улицы только на перекрёстках, то есть именно в тех местах, где движение сильнее всего и где волосок, на котором обычно висит жизнь пешехода, легче всего оборвать. Если пешеходу иной раз удаётся выпорхнуть серебряного носа машины — его штрафует милиция за нарушение правил уличного катехизиса.

Коллектив «Рогов и копыт»:

зицпредседатель Фунт; управляющий отделением Остап Бендер; уполномоченный по рогам и копытам Шура Балаганов; курьер Михаил Самуэлевич Паниковский.

Курсы javascript

Долго поиском шарил по просторам интернета, экспериментировал, но так ни чего и не вышло у меня.

Задача. Нужно вставить слайд-шоу в ячейку таблицы. У меня в таблице место резервируется, а фото всё равно выводится в верхнем левом углу. Копал в сторону position:releative, но толку ни какого, вставлять скрипт в тег результата не меняет.

      
 
 
1
 
2
 
3
 
 
4
 
 
6
 
 
7
 
8
 
9
 
 
 
  

//Presentational Slideshow Script- By Studio Designsib //For full source code and more DHTML scripts, visit [url]http://www.x-sd.ru[/url] //This credit MUST stay intact for legal use var slideshow_width='600px' //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist) var slideshow_height='600px' //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist) var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds) var slidebgcolor="white" var dropimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed dropimages[0]="images/al4.jpg" dropimages[1]="images/al5.jpg" dropimages[2]="images/al6.jpg" var droplinks=new Array() //SET IMAGE URLs. Use "" if you wish particular image to NOT be linked: droplinks[0]="http://www.x-sd.ru" droplinks[1]="" droplinks[2]="http://www.x-sd.ru" ////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p var ie4=document.all var dom=document.getElementById //absolute if (ie4||dom) document.write(' ') else document.write(' ') var curpos=parseInt(slideshow_width)*(-1) var degree=10 var curcanvas="canvas0" var curimageindex=linkindex=0 var nextimageindex=1 function movepic() < if (curpos<0)< curpos=Math.min(curpos+degree,0) tempobj.style.left=curpos+"px" >else< clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) var slideimage='' tempobj.innerHTML=(droplinks[curimageindex]!="")? ''+slideimage+'' : slideimage nextimageindex=(nextimageindex > function rotateimage() < if (ie4||dom)< resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("movepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" >else document.images.defaultslide.src=dropimages[curimageindex] linkindex=curimageindex curimageindex=(curimageindex function rotatelink() < if (droplinks[linkindex]!="") window.location=droplinks[linkindex] >function resetit(what) < curpos=parseInt(slideshow_width)*(-1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.left=curpos+"px" >function startit() < var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='' rotateimage() > if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause)