Nastavení obrázku jako pozadí pro tabulku na webové stránce

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žití CSS

Pozadí

vlastnictví. 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 obrazy nezobrazují, je, že v adrese URL je překlep. Po dokončení tohoto kroku vložte blok bloku stylů CSS do hlava dokumentu:

Napište CSS pro pozadí na stole a vložte jej do bloku stylů:
tabulka {background: url (" URL na obrázek ") neopakovat;}

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.
…

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 a

třída

atribut.Change CSS číst:
table.background {background: url (" URL na obrázek ") neopakovat;}

Přidat třídu Pozadí na libovolnou tabulku, 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í

opakovat-x
nebo

opakování-y
do dlaždice vodorovně nebo svisle, resp.

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!