Атрибут background
Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.
Синтаксис
Значения
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.
Значение по умолчанию
Аналог CSS
HTML 4.01 IE Cr Op Sa Fx
Картинки в таблице
На сайте находятся справочники и учебные курсы по различным веб-технологиям, а также руководства по вёрстке веб-страниц.
Связи
Разделы сайта
Популярное
- Уроки по HTML и CSS
- Руководство по флексбоксам
- HTML5 и CSS3 на примерах
- Руководство по JSON
- Как верстать на HTML5 и CSS3
- Продвинутые уроки по HTML и CSS
- Визуальное руководство по свойствам flexbox
- Создание первого приложения на Node
Помощь по сайту
Сайт WebReference.ru использует VPS от компании Beget.
Как вставить картинку в табличную верстку?
Нужна верстка эмэйл письма,знаю,что там используется табличная верстка и стили в тегах. Нужно сделать так,как на приложенной картинке, а пока нету вообще идей у меня как такое можно сделать.
Мой код на данный момент:
но этот код вставляет картинку в тд,тоесть в ячейку таблицы.
- Вопрос задан более трёх лет назад
- 3750 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Виктор Янышев @villiwalla
Особенности таблиц
Чтобы понимать, что можно ожидать от таблиц при вёрстке, следует знать их явные и неявные особенности, которые перечислены далее.
Вложенные таблицы
Одну таблицу допускается помещать внутрь ячейки другой таблицы. Это требуется для представления сложных данных или в том случае, когда одна таблица выступает в роли модульной сетки, а вторая, внутри нее, в роли обычной таблицы.
Размеры таблицы
Размеры таблицы изначально не устанавливаются и вычисляются на основе содержимого ячеек. В итоге суммарная ширина таблицы складывается из следующих параметров:
- ширина содержимого ячеек;
- толщина всех границ между ячеек;
- поля вокруг содержимого, устанавливаемые через атрибут 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
б. Вид таблицы в 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 меняет алгоритм расчета — браузер анализирует только первую строку и ширину колонок строит согласно ей. За счёт уменьшения числа вычислений и происходит выигрыш скорости отображения таблицы в целом.