Используйте свойство фона CSS, чтобы добавить фоновый рисунок в таблицы
Дифференциация таблиц от их фона помогает подчеркнуть содержание таблицы относительно всего остального на веб-странице. Чтобы добавить фон таблицы, вам нужно настроить каскадную таблицу стилей, поддерживающую вашу веб-страницу.
Начиная
Лучший способ добавить фоновое изображение в таблицу – использовать свойство CSS background . Чтобы подготовиться к эффективному написанию CSS и избежать неожиданных сбоев в отображении, откройте фоновое изображение и запишите высоту и ширину. Затем загрузите изображение на хостинг-провайдера. Проверьте URL для изображения; одна из наиболее распространенных причин, по которой изображения не отображаются, заключается в том, что в URL есть опечатка.
Вставьте блок стиля CSS в заголовок вашего документа:
Напишите свой CSS для фона на вашем столе и поместите его в блок стиля:
table {background: url (" URL-адрес изображения ") no-repeat; }
Поместите вашу таблицу в HTML:
ячейка 1
ячейка 2
ячейка 1
ячейка 2
Установите ширину и высоту таблицы в соответствии с шириной и высотой изображения:
…
Если содержимое вашей таблицы больше, чем высота и ширина изображения, фоновое изображение будет отображаться только один раз.
Положите фон только на один стол
Приведенные выше инструкции будут устанавливать одинаковое фоновое изображение для каждой таблицы на странице. Если вы хотите разместить фон только для определенных таблиц, используйте атрибут class .
table.background {background: url (" URL-адрес изображения ") no-repeat; }
Добавьте класс background к любой таблице, в которую вы хотите добавить фоновое изображение. Установите ширину и высоту для этих таблиц.
class = "background" style = "width: 400px; высота: 500px;>…
Пусть фоновое изображение таблицы повторяется
Для больших таблиц или таблиц с большим содержанием может потребоваться повторение фона, чтобы заполнить всю таблицу. Измените значение в своем CSS, чтобы изображение повторялось по оси Y, по оси X или выложено мозаикой на обоих.
background: url ("URL to image") repeat;
По умолчанию значение повторения будет выложено мозаикой, но вы также можете установить значение повторения в
repeat-x
или же
repeat-y
для плитки горизонтально или вертикально, соответственно.
Цвета фона ячейки блокируют фоновое изображение таблицы
Любые цвета фона, установленные для ячеек таблицы, будут иметь приоритет над фоновым изображением таблицы. Поэтому будьте осторожны при использовании фоновых цветов в ваших ячейках в сочетании с фоновыми изображениями таблицы.
Соображения
Любое изображение, которое вы используете, должно быть надлежащим образом лицензировано; только то, что вы можете найти фотографию в Интернете, не означает, что вы можете присвоить ее для своего собственного использования. Уважайте авторские права!
Фоны таблиц будут отличать ваши таблицы от базовой страницы. Однако дважды подумайте, прежде чем использовать эту технику. Вставка нейтрального изображения может не отвлекать, но сложные картинки, которые должны быть милыми (например, вставка изображения котенка за столом с указанием усыновления домашних животных), могут показаться непрофессиональными и могут повлиять на читаемость табличных данных.
