Rozlišování tabulek od jejich pozadí pomáhá zdůraznit obsah tabulky ve srovnání se vším ostatním na webové stránce. Chcete-li přidat pozadí tabulky, musíte provést změny v kaskádový styl podpora vaší webové stránky.
Začínáme
Nejlepší způsob, jak přidat obrázek na pozadí do tabulky, je použít CSS Pozadí vlastnictví. Chcete-li se připravit na efektivní psaní 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. Poté nahrajte svůj obrázek poskytovateli hostingu. Vyzkoušejte URL obrázku; jedním z nejčastějších důvodů, proč se obrázky nezobrazují, je skutečnost, že v adrese URL je překlep.
Vložte blok stylu CSS do záhlaví dokumentu:
Napište CSS pro pozadí na váš stůl a vložte jej do bloku stylů:
Umístěte tabulku do kódu HTML:
buňka 1 buňka 2
buňka 1 buňka 2
Nastavte šířku a výšku tabulky tak, aby odpovídala šířce a výšce obrázku.
Nastavte šířku a výšku tabulky tak, aby odpovídala šířce a výšce obrázku.
Pokud je obsah tabulky větší než výška a šířka obrázku, obrázek na pozadí se zobrazí pouze jednou.
Umístěte pozadí pouze na jeden stůl
Výše uvedené pokyny nastaví stejný obrázek na pozadí u každé tabulky na stránce. Chcete-li umístit pozadí pouze na konkrétní tabulky, použijte a třída atribut. Přidat třídaPozadí na libovolnou tabulku, kterou chcete mít na pozadí. Nastavte šířku a výšku těchto stolů.
Nechte obrázek na pozadí tabulky opakovat
Větší tabulky nebo tabulky s větším obsahem mohou vyžadovat opakování pozadí, aby byla vyplněna celá tabulka. Změňte hodnotu v CSS tak, aby se obraz opakoval na ose y, ose x nebo byl obložen na obou.
background: url ("URL na obrázek") opakovat;
Ve výchozím nastavení bude hodnota opakování vedle sebe, ale můžete také nastavit hodnotu opakování na.
opakovat-x
nebo.
opakuj-y
horizontálně nebo vertikálně vedle sebe.
Barvy pozadí buňky blokují obrázek na pozadí tabulky
Jakékoli barvy pozadí buňky na stole přepíší obrázek na pozadí tabulky. Buďte tedy opatrní, když používáte barvy pozadí na buňkách v kombinaci s obrázky pozadí tabulky.
Úvahy
Jakýkoli obrázek, který používáte, musí mít řádnou licenci; to, že můžete najít fotku na webu, ještě neznamená, že si ji můžete přizpůsobit pro vlastní potřebu. Respektujte autorská práva!
Pozadí tabulky oddělují vaše tabulky od podkladové stránky. Před použitím této techniky si to však dvakrát rozmyslete. Vložení neutrálního obrázku nemusí být rušivé, ale složité obrázky, které mají být roztomilé (například vložení a obrázek kotěte za stolem označující adopce domácích mazlíčků) se může zdát neprofesionální a může ovlivnit čitelnost the tabulkové údaje.