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

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

Начиная

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

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



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

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









ячейка 1клетка 2
ячейка 1клетка 2

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

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

Положите фон только на один стол

Приведенные выше инструкции будут устанавливать одинаковое фоновое изображение для каждой таблицы на странице. Если вы хотите поместить фон только на определенные таблицы, используйте класс attribute.vИзмените свой CSS, чтобы читать:

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

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

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

background: url ("URL to image") repeat; 

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

повторить-х

или же

Повторяю у

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

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

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

Соображения

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

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

Ссылка на основную публикацию