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

@Syltan · Регистрация: 27.08.2009

Студворк — интернет-сервис помощи студентам

Как сделать картинку на всю ширину ячейки таблицы, что-то не выходит.
пробую так, самое простое.

HTML5
1
2
3
4
5
6
7
8
<table align="center"  border=10 bordercolor=breen>
<CAPTION align=bottom> Таблица калорийности яйца</CAPTION>
<tr>
  <td align=justify><img  src="kalorii.jpg" alt="Фото калории"></td>
<td>кДж</td>
<td>ккал</td>
</tr>
</table>

Картинка не растягивается по ширине ячейки.
Подскажите, как можно это сделать отдельно через CSS, или через HTML.
Заранее благодарю за скорый ответ.

@4iNo · 26.03.2010, 03:45

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
td#some { width: 60%; height: 30% }
table { height: 100%; width: 100% }
</style>
<body>
   <table>
       <tr>
            <td>1</td>
            <td>2</td>
            <td id="some"><img alt="image" src="1.jpg" height="100%" width="100%"></td>
       </tr>
   </table>
</body>

@Syltan · 26.03.2010, 22:00 **[ТС]**

Что-то не срабатывает.Написал так:

Code
1
2
3
4
5
6
7
8
9
<table align="center"  border=10 bordercolor=breen>
<CAPTION align=bottom> Таблица калорийности яйца</CAPTION>
<tr>
  <td width=89px height=85px align=justify>
<img  src="kalorii.jpg" alt="Фото калории" width:100%; height:100%;></td>
<td>кДж</td>
<td>ккал</td>
</tr>
</table>

Добавлено через 20 минут
Как ни странно помогло вот так:

Code
1
2
3
4
5
6
7
8
9
10
<table align="center"  border=10 bordercolor=breen>
<CAPTION align=bottom> Таблица калорийности яйца</CAPTION>
<tr>
  <td width="89px" >
<img  src="kalorii.jpg" alt="Фото калории"
 width="100%"  style="display:block"></td>
<td>кДж</td>
<td>ккал</td>
</tr>
</table>

Вы не скажете что это такое означает display:block?

Humanoid · 26.03.2010, 22:36

Сообщение от Syltan

HTML5
1
<img src="kalorii.jpg" alt="Фото калории" style="width:100%; height:100%;">

Добавлено через 42 секунды

Сообщение от Syltan

Вы не скажете что это такое означает display:block?

Означает, что элемент будет себя вести как блочный элемент (как div, например).

@Syltan · 26.03.2010, 23:36 **[ТС]**

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

@acupation · 26.03.2010, 23:57

поставь картинки в разные ячейки с бордюром "0". Должно помоч.

@Syltan · 27.03.2010, 00:07 **[ТС]**

Вот так не срабатывает:

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<center>Калорийность продуктов. Яйцо и яйцепродукты
<table align="center"  border=10 bordercolor=breen cellpadding="0" cellspacing="0">
<CAPTION align=bottom > Таблица калорийности яйца</CAPTION>
<tr>
<td width="130px" height="130px">
<a href="http://google.ru"><img  src="kalorii1.jpg" alt="Фото калории"
 width="100%"  ></td></a>
 
<td width="130px" height="130px"><a href="http://google.ru"><img  src="kalorii2.jpg" alt="Фото калории"
 width="100%"  ></td></a>
 
<td width="130px" height="130px"><a href="http://google.ru"><img  src="kalorii3.jpg" alt="Фото калории"
 width="100%"  ></td></a>
 
<td width="130px" height="130px"><a href="http://google.ru"><img  src="kalorii4.jpg" alt="Фото калории"
 width="100%" ></td></a>
</td>
</tr>
</table>
</center>

@acupation · 27.03.2010, 00:13

border=0 а не 10 сделай) я же писал)

Если хочешь вокруг цвет другой, создай таблицу и в ней ячейки, сделай уже той таблицы бордюр)

@Syltan · 27.03.2010, 00:32 **[ТС]**

Если напсиать так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<center>Калорийность продуктов. Яйцо и яйцепродукты
<table align="center"  border=0 bordercolor=breen >
<CAPTION align=bottom > Таблица калорийности яйца</CAPTION>
<tr>
<td width="130px" height="130px" >
<img  src="kalorii1.jpg" alt="Фото калории"
 height="130px" width="100%"  ></td></a>
 
<td" width="130px" height="130px" >
<img  src="kalorii2.jpg" alt="Фото калории"
 height="130px" width="100%"  ></td></a>
 
<td width="130px" height="130px" >
<img  src="kalorii3.jpg" alt="Фото калории"
 height="130px" width="100%"  ></td></a>
 
<td   width="130px" height="130px">
<img  src="kalorii4.jpg" alt="Фото калории"
 height="130px" width="100%" ></td></a>
 
</td>
</tr>
</table>
</center>

Получается опять бред, а не 4 картикни подряд.
Что делать? но мне нужна рамка цветная таблицы также.

@acupation · 27.03.2010, 00:48

10 строка, смотри:

Code
1
<td" width="130px" height="130px" >

убери " после td лишнюю)) щас приду с магазина сделаю тебе рамку)

ах да, с 22 строки </td> тож убери) а то оно ничего не закрывает вроде)

@Syltan · 27.03.2010, 00:53 **[ТС]**

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<center>Калорийность продуктов. Яйцо и яйцепродукты
<table align="center"  border=5 bordercolor=breen >
<CAPTION align=bottom > Таблица калорийности яйца</CAPTION>
<tr>
<td style="display:lock;" width="130px" height="130px"  >
<img  src="kalorii1.jpg" alt="Фото калории" 
 height="130px" width="100%"  ></td></a>
 
<td   width="130px" height="130px" >
<img  src="kalorii2.jpg" alt="Фото калории"
 height="130px" width="100%"  ></td></a>
 
<td width="130px" height="130px" >
<img  src="kalorii3.jpg" alt="Фото калории"
 height="130px" width="100%"  ></td></a>
 
<td   width="130px" height="130px">
<img  src="kalorii4.jpg" alt="Фото калории"
 height="130px" width="100%" ></td></a>
 
</td>
</tr>
</table>
</center>

Опять ерунда выходит.

@SkyWalker · 27.03.2010, 01:19

Смотри, вот так написал вроде бы нормально все

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<body>
<table width="587" height="251" border="5" bordercolor="#00FF00">
  <tr bordercolor="#99FF66">
    <td width="250"><img src="photo.jpg" width="250" height="235" /></td>
    <td width="253"><img src="photo.jpg" width="253" height="236" /></td>
    <td width="250"><img src="photo.jpg" width="250" height="235" /></td>
    <td width="253"><img src="photo.jpg" width="253" height="236" /></td>
  </tr>
</table>
</body>
</html>

@Syltan · 27.03.2010, 01:24 **[ТС]**

Та же самая история, никаких изменений картинка так же само отображает.

@SkyWalker · 27.03.2010, 01:26

Сообщение от Syltan

Та же самая история, никаких изменений картинка так же само отображает.

какой у тебя браузер? у меня в fire fox 3.6 и в ie7 все отлично отображается.

@Syltan · 27.03.2010, 01:29 **[ТС]**

У меня ИЕ8

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<center>Калорийность продуктов. Яйцо и яйцепродукты</center>
<table align="center"  border=5 bordercolor=breen >
<CAPTION align=bottom > Таблица калорийности яйца</CAPTION>
<tr bordercolor="#99FF66">
<td width="130px" height="130px"  >
<img  src="kalorii1.jpg" alt="Фото калории" 
 height="130px" width="100%"  ></td></a>
 
<td   width="130px" height="130px" >
<img  src="kalorii2.jpg" alt="Фото калории"
 height="130px" width="100%"  ></td></a>
 
<td width="130px" height="130px" >
<img  src="kalorii3.jpg" alt="Фото калории"
 height="130px" width="100%"  ></td></a>
 
<td   width="130px" height="130px">
<img  src="kalorii4.jpg" alt="Фото калории"
 height="130px" width="100%" ></td></a>
 
</td>
</tr>
</table>

@SkyWalker · 27.03.2010, 01:30

ну, а другой какой-нибудь есть, если да, то попробуй посмотри

@Syltan · 27.03.2010, 01:32 **[ТС]**

Также само отображает. ПОдскажите применимо с моим именно кодом.

@SkyWalker · 27.03.2010, 01:35

напиши точно также, как я тебе дал пример, просто вставь свою картинку.

@acupation · 27.03.2010, 01:36

у меня в 4 браузерах все отлично отображается)) дай полный текст своего файла... может там что-то. По идее строится рамка внутри которой и находится изображение. Если рамка гуляет то и изображение. А у тебя они друг от друга отдельно живут)

@SkyWalker · 27.03.2010, 01:38

Сообщение от acupation

у меня в 4 браузерах все отлично отображается)) дай полный текст своего файла... может там что-то. По идее строится рамка внутри которой и находится изображение. Если рамка гуляет то и изображение. А у тебя они друг от друга отдельно живут)

Все верно, строится рамка внутри которой и находится изображение!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	26.03.2010, 23:36 [ТС]
	Проблемма возникла при размещении нескольких картинок подряд, мне нужно чтоб они имели одинаковую вісоту и длину, но так не выходит, с прмиенением моего кода. 0

@acupation 67 / 67 / 6 Регистрация: 26.03.2010 Сообщений: 546
	26.03.2010, 23:57
	поставь картинки в разные ячейки с бордюром "0". Должно помоч. 0

@acupation 67 / 67 / 6 Регистрация: 26.03.2010 Сообщений: 546
	27.03.2010, 00:13
	border=0 а не 10 сделай) я же писал) Если хочешь вокруг цвет другой, создай таблицу и в ней ячейки, сделай уже той таблицы бордюр) 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	27.03.2010, 01:24 [ТС]
	Та же самая история, никаких изменений картинка так же само отображает. 0

@SkyWalker Cyber-Tracing 346 / 71 / 3 Регистрация: 27.04.2009 Сообщений: 554
	27.03.2010, 01:30
	ну, а другой какой-нибудь есть, если да, то попробуй посмотри 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	27.03.2010, 01:32 [ТС]
	Также само отображает. ПОдскажите применимо с моим именно кодом. 0

@SkyWalker Cyber-Tracing 346 / 71 / 3 Регистрация: 27.04.2009 Сообщений: 554
	27.03.2010, 01:35
	напиши точно также, как я тебе дал пример, просто вставь свою картинку. 0

@acupation 67 / 67 / 6 Регистрация: 26.03.2010 Сообщений: 546
	27.03.2010, 01:36
	у меня в 4 браузерах все отлично отображается)) дай полный текст своего файла... может там что-то. По идее строится рамка внутри которой и находится изображение. Если рамка гуляет то и изображение. А у тебя они друг от друга отдельно живут) 0