Дифференциация таблиц от их фона помогает подчеркнуть содержание таблицы относительно всего остального на веб-странице. Чтобы добавить фон таблицы, вам нужно настроить каскадную таблицу стилей, поддерживающую вашу веб-страницу.
Начиная
Лучший способ добавить фоновое изображение в таблицу — использовать свойство фона CSS . Чтобы подготовиться к эффективному написанию CSS и избежать неожиданных сбоев в отображении, откройте фоновое изображение и запишите высоту и ширину. Затем загрузите изображение на хостинг-провайдера. Проверьте URL для изображения; одна из наиболее распространенных причин, по которой изображения не отображаются, заключается в том, что в URL есть опечатка.
Вставьте блок стиля CSS в заголовок вашего документа:
<style type = "text / css">
</ style>
Напишите свой CSS для фона на вашем столе и поместите его в блок стиля:
Поместите вашу таблицу в HTML:
<таблица> <tr>
<td> ячейка 1 </ td>
<td> ячейка 2 </ td>
</ tr>
<tr>
<td> ячейка 1 </ td>
<td> ячейка 2 </ td>
< / tr>
</ table>
Установите ширину и высоту таблицы в соответствии с шириной и высотой изображения.
Если содержимое вашей таблицы больше, чем высота и ширина изображения, фоновое изображение будет отображаться только один раз.
Положите фон только на один стол
Приведенные выше инструкции будут устанавливать одинаковое фоновое изображение для каждой таблицы на странице. Чтобы поместить фон только в определенные таблицы , используйте атрибут класса . Добавьте фон класса к любой таблице, в которую вы хотите добавить фоновое изображение. Установите ширину и высоту для этих таблиц.
Пусть фоновое изображение таблицы повторяется
Для больших таблиц или таблиц с большим содержанием может потребоваться повторение фона, чтобы заполнить всю таблицу. Измените значение в своем CSS, чтобы изображение повторялось по оси Y, по оси X или выложено мозаикой на обоих.
background: url ("URL to image") repeat;
По умолчанию значение повтора будет выложено мозаикой, но вы также можете установить значение повтора в
повтор-х
или же
повтор у
укладывать плитку горизонтально или вертикально соответственно.
Цвета фона ячейки блокируют фоновое изображение таблицы
Любые цвета фона, установленные в ячейках таблицы, переопределяют фоновое изображение в таблице. Поэтому будьте осторожны при использовании цветов фона в ваших ячейках в сочетании с фоновыми изображениями таблицы.
Соображения
Любое изображение, которое вы используете, должно быть надлежащим образом лицензировано; просто потому, что вы можете найти фотографию в Интернете, не означает, что вы можете присвоить ее для собственного использования. Уважайте авторские права!
Фоны таблиц устанавливают ваши таблицы отдельно от базовой страницы. Однако дважды подумайте, прежде чем использовать эту технику. Вставка нейтрального изображения может не отвлекать, но сложные картинки, которые должны быть милыми (например, вставка изображения котенка за столом с указанием усыновления домашних животных), могут показаться непрофессиональными и могут повлиять на читаемость табличных данных .