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

Картинки в таблице

На сайте находятся справочники и учебные курсы по различным веб-технологиям, а также руководства по вёрстке веб-страниц.

Связи

Разделы сайта

Помощь по сайту

Сайт WebReference.ru использует VPS от компании Beget.

Особенности таблиц

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

Вложенные таблицы

Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, в роли обычной таблицы.

Размеры таблицы

Размеры таблицы изначально не устанавливаются и вычисляются на основе содержимого ячеек. В итоге суммарная ширина таблицы складывается из следующих параметров:

ширина содержимого ячеек;
толщина всех границ между ячеек;
поля вокруг содержимого, устанавливаемые через атрибут cellpadding ;
расстояние между ячейками, которое определяется значением cellspacing .

Если для таблицы установлена её ширина в процентах или пикселах, то содержимое таблицы подстраивается под указанные размеры. Так, браузер автоматически добавляет переносы строк в текст, чтобы он полностью поместился в ячейку, и при этом ширина таблицы осталась без изменений. Бывает, что ширину содержимого ячейки невозможно изменить, как это, например, происходит с рисунками. В этом случае ширина таблицы увеличивается, несмотря на указанные размеры. Чтобы избежать указанной ситуации применяют несколько средств.

Пример 2.1. Использование table-layout

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Таблица TABLE < table-layout: fixed; /* Ячейки фиксированной ширины */ >TD.dino    .

Результат данного примера зависит от браузера. В старых браузерах рисунок за пределами ячейки обрезается (рис. 2.1а), в современных браузерах рисунок выводится поверх второй ячейки (рис. 2.1б).

Вид таблицы в IE6, IE7, Firefox 2

а. Вид таблицы в IE6, IE7, Firefox 2

Вид таблицы в IE8, IE9, Firefox 3, Safari и Chrome

б. Вид таблицы в IE8, IE9, Firefox 3, Firefox 4, Safari и Chrome

Рис. 2.1. Использование table-layout

Сделать единообразный вид таблицы во всех браузерах легко, для этого к ячейке с рисунком следует добавить свойство overflow со значением hidden . При этом всё, что не помещается в ячейку, будет «обрезано», как продемонстрировано на рис. 2.1а. Стиль в этом случае изменится незначительно.

TABLE < table-layout: fixed; /* Ячейки фиксированной ширины */ >TD.dino

Высота ячеек

Ячейки в одной строке взаимосвязаны и их высота одинакова. Это позволяет делать макеты с колонками одной высоты. В примере 2.2 приведён такой макет, в котором, несмотря на разную высоту контента, колонки равны по высоте.

Пример 2.2. Колонки одной высоты

XHTML 1.0 CSS 2.1 IE 9 Cr Op Sa Fx

    Высота ячеек     Мясо отварить до готовности. Промыть свеклу, очистить, нарезать соломкой и тушить с помидорами до полуготовности.
 Бульон процедить, мясо нарезать кусочками. В бульон добавить нарезанный дольками картофель, довести до кипения, опустить нарезанную соломкой свежую капусту и варить 10-15 минут, добавить пассерованные овощи, болгарский перец, нашинкованный тонкой соломкой, специи и довести до готовности.
 Готовому борщу дать настояться в течение 20-25 минут. При подаче к столу добавить сметану, мясо, зелень.

Результат примера показан на рис. 2.2.

Макет, созданный с использованием таблицы

Рис. 2.2. Макет, созданный с использованием таблицы

В данном примере в ячейках разное содержание, но высота ячеек одинакова.

Порядок ячеек

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

Порядок создания ячеек

Рис. 2.3. Порядок создания ячеек

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

Загрузка таблицы

Пока таблица не загрузится полностью, её содержимое не начнёт отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого нужно знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.

Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 Кб). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout , применение которого позволяет несколько повысить скорость отображения содержимого таблицы. В обычной таблице браузер анализирует все ячейки и затем уже изменяет ширину колонок на основе этой информации. Включение table-layout со значением fixed меняет алгоритм расчета — браузер анализирует только первую строку и ширину колонок строит согласно ей. За счёт уменьшения числа вычислений и происходит выигрыш скорости отображения таблицы в целом.

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

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

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

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

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

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

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

villiwalla

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

Как вставлять картинки в таблицу с помощью БД?

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

8 мар 2013 в 16:45

я тоже подумал об этом. А как выявить ссылку в виде картинки в таблице? Там же сама ссылка будет выявлена. Разве нет? @Heleg

8 мар 2013 в 18:05

> А как выявить ссылку в виде картинки в таблице? Там же сама ссылка будет выявлена что означает это словоблудие?

8 мар 2013 в 18:13
т.е в виде текста -_-
8 мар 2013 в 18:22

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Для начала нам нужно создать таблицу в MySQL. Назовем ее img, а потом вставим в нее такие столбики:

id img text

в img вставим путь к картинке,

Например: /image/img.jpg

И на конец простым php кодом выводим все картинки в цикле:

$sql = mysql_query("SELECT * FROM img"); while($row = mysql_fetch_array($sql))< echo "Картинка:  
ID картинки: ".$row['id']." 
Описание: ".$row['text']."
"; >

Ну вот так, как то 🙂