Разграничаването на таблиците от фона им помага да се подчертае съдържанието на таблицата спрямо всичко останало на уеб страницата. За да добавите фон на таблица, ще трябва да направите промени в каскаден лист със стилове поддържаща вашата уеб страница.
Приготвяме се да започнем
Най-добрият начин да добавите фоново изображение към таблица е да използвате CSS заден план Имот. За да се подготвите за ефективното писане на CSS и за да избегнете неочаквани проблеми с дисплея, отворете фоновото си изображение и отбележете височината и ширината. След това качете вашето изображение на вашия хостинг доставчик. Тествайте URL адреса на изображението; една от най-честите причини, поради които изображенията не се показват, е, че в URL адреса има печатна грешка.
Вмъкнете блок CSS стил в главата на вашия документ:
Напишете вашия CSS за фон на вашата маса и го поставете в блока за стил:
Поставете таблицата си в HTML:
клетка 1 клетка 2
клетка 1 клетка 2
Задайте ширината и височината на таблицата, за да съответства на ширината и височината на изображението.
Задайте ширината и височината на таблицата, за да съответства на ширината и височината на изображението.
Ако съдържанието на таблицата ви е по-голямо от височината и ширината на изображението, фоновото изображение ще се покаже само веднъж.
Поставете фон само на една маса
Горните инструкции ще зададат едно и също фоново изображение на всяка таблица на страницата. За да поставите фона само на определени таблици, използвайте a клас атрибут. Добавете класзаден план към всяка таблица, която искате да имате това фоново изображение. Задайте ширината и височината за тези таблици.
Оставете фоновото изображение на таблицата да се повтори
При по-големи таблици или таблици с повече съдържание може да се наложи повторението на фона, така че да се запълни цялата таблица. Променете стойността във вашия CSS, така че изображението да се повтаря по оста y, оста x или да е с плочки и върху двете.
фон: url ("URL към изображение") повторение;
По подразбиране стойността за повторение ще бъде с плочки, но можете също да зададете стойността за повторение на.
повторение-x
или.
повторете-y
за да поставите плочки съответно хоризонтално или вертикално.
Цветовете на фона на клетката блокират фоновото изображение на таблицата
Всички цветове на фона зададени в клетките на таблицата заместват фоновото изображение на таблицата. Затова бъдете внимателни, когато използвате цветове на фона на клетките си в комбинация с фонови изображения на таблица.
Съображения
Всяко изображение, което използвате, трябва да бъде правилно лицензирано; това, че можете да намерите снимка в мрежата, не означава, че можете да я присвоите за собствена употреба. Уважавайте авторските права!
Фонът на таблицата отличава вашите таблици от основната страница. Помислете обаче добре преди да използвате тази техника. Поставянето на неутрално изображение може да не отвлича вниманието, но сложни снимки, предназначени да бъдат сладки (например вмъкване на снимка на коте зад маса, показваща осиновяването на домашни любимци) може да изглежда непрофесионално и може да повлияе на четливостта на на таблични данни.