Как сделать картинку фоном в таблице html
Перейти к содержимому

Как сделать картинку фоном в таблице html

  • автор:

Атрибут background

Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона также допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Данный атрибут устарел, взамен используйте стили.

Синтаксис

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Пример

TABLE, атрибут background

.

Примечание

Чтобы задать фоновую картинку для таблицы, воспользуйтесь стилевым свойством background.

Фон таблицы

.

Браузеры

3 12 1 3.5 1 1
4.4 4 6 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Атрибут background

Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Аналог CSS

HTML 4.01 IE Cr Op Sa Fx

    Тег TABLE, атрибут background   
.

Урок 4. Вставляем логотип. Цвет фона и фоновое изображение

Для того, чтобы наполнить нашу таблицу содержимым, будем последовательно вставлять картинки, ссылки и текст в ячейки таблиц.
1. Логотип.
Первая таблица, в которой будут стоять логотип и ссылки (её код мы уже писали во втором уроке):

Внимание! Не забывайте важный момент (я хочу о нём напомнить, потому что такая ошибка встречается): одинарные (‘) и двойные («) кавычки в html и прочих языках программирования имеют разное значение. Две одинарные кавычки не заменят одну двойную. В данном случае, во всех кодах, которые я привожу, кавычки должны быть двойные.

1.1. Для начала нам нужна картинка, которую мы станем использовать, как логотип. Эту картинку нужно сделать определённого размера и загрузить либо на Радикал.ру, либо в корневую папку нашего сайта. Лучше в корневую папку, потому что тогда вы не будете зависеть от неполадок на сервисе изображений Радикал.ру, которые иногда случаются.

Загружаем картинку нужного нам размера в корневую папку. Логотип нужно делать с учётом разрешения монитора. Вы должны учитывать, как ваш логотип будет смотреться на мониторах с разным разрешением: не будет ли он растягивать экран при разрешении меньше, чем ваше, не потеряется ли где-то в углу, отделённый от ячейки с ссылками огромным пустым пространством, на мониторе у которого разрешение больше, чем у вас. Учитывая, что мы поставили вторую ячейку таблицы, предназначенную для ссылок — 200 px, 600+200=800рх. При разрешении монитора 800 на 600 рх логотип и ссылки будут располагаться вплотную друг к другу.
Нужно учитывать, что при любом разрешении, какое бы оно ни было у пользователей, на ваших страницах может появиться горизонтальная полоса прокрутки. Это можно счесть ошибкой в дизайне. Горизонтальной полосы прокрутки на странице с качественным дизайном быть НЕ ДОЛЖНО.
Так же нежелательное явление — большой вес логотипа. Чем меньше весит логотип — тем лучше. Ваша страница будет грузиться быстро и пользователи не будут выражать недовольство по поводу потраченного траффика. Если ваш логотип будет весить меньше 15-ти Кb — будет очень хорошо.
Про масштабирующиеся логотипы поговорим отдельно, а сейчас продолжим про обычный логотип.

1.2. Итак, мы загрузили нужную нам картинку в корневую папку нашего сайта, назвав её к примеру «logo».
Далее мы вставляем картинку в соответствующие теги, как мы это делали, вставляя изображение в баннер:
logo.jpg » border=»0″&gt
Красным цветом обозначена картинка. Не забывайте ставить формат, в котором выполнена картинка. Это в данном случае jpg, но может быть картинка, сохранённая в формате gif или каком-либо другом.

1.3. Теперь всю эту ссылку необходимо вставить в HTML-код нашей таблицы, на то место, где у нас написано слово «Логотип». Чтобы логотип встал с выравниванием по левому краю, добавим в ячейку атрибут выравнивания align=»left»

Подставляем теперь эту таблицу в нашу страницу, на которой у нас сделаны все таблицы для нашего сайта и весь код будет выглядеть так:

1.4. Загрузим всю эту конструкцию на нашу страницу. Получится вот что:
Наша первая страница

2. Цвет фона и фоновое изображение (bgcolor и background)

2.1. Для того, чтобы наша страница была определённого цвета, необходимо задать цвет фона. Поскольку цвет прописывается для всей страницы, то есть для её «тела», необходимо прописать атрибут цвета внутрь тега Цвет фона задаётся атрибутом bgcolor, которому присваивается значение того цвета, какой вам нужен. Например, мы хотим, чтобы фон страницы был светло-серый. Мы находим в таблице цветов, или в фотошопе соответствующий цвет #c0c0c0 — который отвечает именно за светло-серый, и прописываем атрибут с его значением, так же, как мы прописывали значения других атрибутов: bgcolor=»#c0c0c0″. А теперь этот атрибут помещаем внутрь тега Вставляем данный изменённый тег в нашу страницу и получается вот что:
Наша первая страница, фон серый

Нужный вам цвет можно найти вот в этих таблицах:

2.2. Теперь зададим другое значение — background. Этот атрибут и означает фоновую картинку.
Вставим в фон вот такую картинку:

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

Предположим, у нас есть какая-то очень красивая картинка, например какой-нибудь зимний пейзаж. Картинка размером 1024х768. И если на неё смотреть монитора, разрешение которого 1024 на 768 — всё будет выглядеть прекрасно. Но если на наш сайт посмотрит пользователь у которого разрешение монитора 1280х1024, он увидит, что сама картинка отъехала в верхний левый угол, а свободные места снизу и справа от неё заполнились кусками этой же картинки, совершенно не состыкованными с первоначальным изображением. В общем, наш фон окажется на таком разрешении изуродованным.
Если же вдруг у пользователя разрешение монитора меньше, чем 1024х768 он увидит только кусочек вашего фона, точнее, его левый верхний угол.
Нам это не подходит.

Вторая сложность: чем больше картинка размером, тем больше её вес, тем дольше она будет грузиться и тем больше тратить трафика пользователя.

Третья сложность: на ярком, красочном фоне ничего не возможно прочитать. Буквы будут просто теряться среди ярких красок.
Поэтому пожертвуем пейзажами и картинами и поставим что-нибудь поскромнее, полегче весом, масштабирующееся под любое разрешение монитора и не мешающее читать текст.

Итак, суммируем: вес фоновой картинки прибавляется к общему весу страницы, поэтому не грузите сильно тяжёлые картинки, экономьте трафик.
Фоновое изображение может по каким-то причинам не открываться сразу, особенно если вы захотите загрузить его не на свой сайт, а для экономии места воспользуетесь чьим-нибудь сервисом картинок. К примеру, тем же Радикалом. И если на Радикале произойдёт сбой, ваше изображение может не загрузиться вовсе.
Нужно учитывать так же, что если у вас текст набран чёрными буквами, а вы положили под фоновое изображение чёрный фон — если фоновое изображение не откроется, чёрный текст на чёрном фоне прочитать будет невозможно и гость будет очень удивлён, увидев сплошное чёрное пятно вместо вашей страницы.
Иными словами, подбирая фоновое изображение, вы должны учитывать контрастность текста по отношению к фоновому изображению и фону под ним. Чтобы ваш текст ВСЕГДА был ХОРОШО ЧИТАЕМ!

Для фона я в данном случае взяла очень маленькую картинку, 30 на 28 пикселов, которая весит очень мало, около 51 байта. И вес всей страницы будет считаться только по одной картинке, которая просто размножается в фоне бесчисленное множество раз. Теперь давайте посмотрим, как поставить фоновое изображение.

2.3. Допустим, мы загрузили в нашу папку, где лежат все наши страницы, фоновую картинку и присвоили ей имя «f3.gif» (формат может быть и jpg).
Поскольку фон стоит для всей страницы, то и прописать его нужно в «тело» страницы, то есть всё в тот же Выглядеть это будет так: Наша первая страница, фон серый + фоновая картинка

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

Изображение как фон одной ячейки таблицы

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

Как изменить фон ячейки таблицы
Подскажите, как при наведении мыши на ячейку таблицы изменить фон ДРУГОЙ ячейки этой же таблицы. .

Как сделать ячейки таблицы одной длины?
Добрый день , подскажите пжл как сделать ячейки таблицы одной длины , смотрите какие они у меня .

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

Регистрация: 05.11.2008
Сообщений: 113
так же как и самой таблице

1 2 3 4 5
table> tr> td background="URL картинки">/td> /tr> /table>

2773 / 341 / 22
Регистрация: 15.01.2008
Сообщений: 2,614
61 / 61 / 11
Регистрация: 19.09.2009
Сообщений: 844

background — устарел.

1 2 3 4 5
table> tr> td style="background-images: url(images.jpg);">/td> /tr> /table>

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

[QUOTE=nepster;313297]abra

background — устарел.

Но при Этом же он корректно работает! Разве не Так?

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

nepster , если уж писать со стилями, то логичнее вынести все стили (оформление) в отдельный файл. Иначе это зря утяжеляет код, НО по скольку человек не знает базовых вещей, зачем его грузить CSS (которого он точно не знает)?

Регистрация: 06.10.2009
Сообщений: 37
Вполне согласен!
2773 / 341 / 22
Регистрация: 15.01.2008
Сообщений: 2,614

Если я не ошибаюсь то в спецификации не сказанно что background устарел. Написано не желательно использовать и нужно использовать css но про устрарелость или отмененность там вроде ничего не сказано

61 / 61 / 11
Регистрация: 19.09.2009
Сообщений: 844

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

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

зачем ?
красивый код
валидный код
кроссбраузерность

Я как пишу сайты, даже не проверяю их в других браузерах, так как знаю, что если придерживаться правил xhtml и css все будет работать везде. Так и есть, 1 разок довелось запустить верстку в ie5 и все отлично.

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

Как выровнять текст внутри одной взятой ячейки таблицы?
Народ подскажите как выровнять текст (а также и числа) внутри одной взятой ячейки таблицы?

Как скопировать данные из одной ячейки таблицы в другую, когда выполнено условие?
Доброго времени суток. Я далеко не знаток exel. не могу придумать формулу. Условие такое: есть.

Как найти все необходимые HTML таблицы через поиск, только по значению одной ячейки
Всем привет, друзья! В общем история такая: К примеру у меня есть восемь HTML таблиц со.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *