Установка изображения в качестве фона для таблицы на веб-странице

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

Современные офисные здания, являющиеся частью возрождения полуострова Гринвич, юго-восток Лондона, Великобритания
Строительная фотография / Avalon / Getty Images

Начиная

Лучший способ добавить фоновое изображение в таблицу - использовать CSS задний план имущество. Чтобы подготовиться к эффективному написанию CSS и избежать неожиданных сбоев при отображении, откройте фоновое изображение и запишите его высоту и ширину. Затем загрузите свое изображение к своему хостинг-провайдеру. Проверьте URL-адрес изображения; Одна из наиболее распространенных причин, по которой изображения не отображаются, - это опечатка в URL-адресе.

Вставьте блок стиля CSS в заголовок документа:


Напишите свой CSS для фона на вашем столе и поместите его в блок стилей:

Поместите свою таблицу в HTML:

ячейка 1 ячейка 2
ячейка 1 ячейка 2
Установите ширину и высоту таблицы в соответствии с шириной и высотой изображения.

instagram viewer

Установите ширину и высоту таблицы в соответствии с шириной и высотой изображения.

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

Поместите фон всего на один стол

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

Пусть повторяется фоновое изображение стола

Для больших таблиц или таблиц с большим количеством содержимого может потребоваться повторение фона, чтобы вся таблица была заполнена. Измените значение в вашем CSS так, чтобы изображение повторялось по оси Y, по оси X или мозаично по обеим сторонам.

фон: url («URL-адрес изображения») повторяется; 

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

повторить-x

или же.

повторять

для плитки по горизонтали или вертикали соответственно.

Цвета фона ячейки блокируют фоновое изображение таблицы

Любые цвета фона установленные на таблице ячейки переопределяют фоновое изображение на таблице. Поэтому будьте осторожны при использовании цветов фона в ячейках в сочетании с фоновыми изображениями таблиц.

Соображения

Любое изображение, которое вы используете, должно быть лицензировано надлежащим образом; просто потому, что вы можете найти фотографию в Интернете, не означает, что вы можете использовать ее для собственного использования. Уважайте авторские права!

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