Použijte vlastnost pozadí CSS pro přidání pozadí obrázku do tabulek
Rozlišování tabulek od pozadí pomáhá zdůraznit obsah tabulky ve vztahu ke všem ostatním na webové stránce. Chcete-li přidat pozadí tabulky, musíte vylepšit kaskádový stylový list (CSS), který podporuje vaši webovou stránku.
Začínáme
Nejlepší způsob, jak přidat obrázek na pozadí do tabulky, je použít vlastnost pozadí CSS. Chcete-li se připravit na efektivní napsání CSS a vyhnout se neočekávaným závadám na displeji, otevřete obrázek na pozadí a poznamenejte si výšku a šířku.
Pak nahrajte svůj obrázek poskytovateli hostingu. Otestujte adresu URL obrázku; jeden z nejčastějších důvodů, proč se snímky nezobrazují, je, že v adrese URL je překlep.
Po dokončení tohoto kroku vložte blok bloku stylu CSS do hlavice dokumentu:
- Napište CSS pro pozadí na stole a vložte jej do bloku stylů:
tabulka {background: url (" URL k obrázku ") no-repeat; }}
- Umístěte svůj tabulku do kódu HTML:
buňka 1
buňka 2
buňka 1
buňka 2
- Nastavte šířku a výšku tabulky podle šířky a výšky obrazu.
šířka: 400px; výška: 500px; "> ...
Pokud je obsah tabulky větší než výška a šířka obrázku, obrázek pozadí se zobrazí pouze jednou.
Dejte pozadí pouze na jednu tabulku
Výše uvedené pokyny nastaví stejný obrázek na pozadí na každé tabulce na stránce.
Pokud chcete umístit pozadí pouze na konkrétní tabulky, musíte použít atribut třídy.
- Změňte svůj CSS a přečtěte si:
table.background {background: url (" URL k obrázku ") no-repeat; }}
- Přidejte pozadí třídy do libovolné tabulky, kterou chcete mít tento obrázek na pozadí. Nastavte šířku a výšku těchto tabulek.
class = "background" styl = "šířka: 400px; výška: 500px;> ...
Nechte obrázek pozadí pozadí tabulky opakovat
Větší tabulky nebo tabulky s více obsahem mohou být potřeba opakovat pozadí tak, aby byla vyplněna celá tabulka. Změňte hodnotu v CSS tak, aby se obraz opakoval na ose y, na ose x nebo na obojí.
pozadí: url (" URL to image ") opakovat ;
Ve výchozím nastavení bude hodnota opakování dlaždicována, ale můžete také nastavit hodnotu opakování na opakování-x nebo opakování-y na vodorovnou nebo svislou dlaždici.
Barvy pozadí buňky blokují obrázek pozadí tabulky
Jakékoli barvy pozadí nastavené na buňkách tabulky přepsají obrázek pozadí v tabulce. Buďte proto opatrní, když používáte barvy pozadí na buňkách v kombinaci s obrázky na pozadí.
Úvahy
Tabulka pozadí nastaví vaše tabulky od základní stránky. Nicméně před tím, než použijete tuto techniku, rozmyslete si. Vkládání neutrálního obrázku nemusí být rušivé, ale komplikované obrázky, které mají být roztomilé (například vložení obrázku kotě za stůl označující adopci zvířat), se mohou zdát neprofesionální a mohou mít vliv na čitelnost tabelárních dat .
Jakýkoli obrázek, který používáte, musí být řádně licencován; jen proto, že můžete najít fotografii na webu, neznamená, že ji můžete použít pro vlastní potřebu.
Respektujte autorská práva!
- Nastavte šířku a výšku tabulky podle šířky a výšky obrazu.