Odlíšenie tabuliek od ich pozadia pomáha zdôrazniť obsah tabuľky v porovnaní so všetkým ostatným na webovej stránke. Ak chcete pridať pozadie tabuľky, musíte vykonať zmeny v kaskádový štýl podpora vašej webovej stránky.
Začíname
Najlepším spôsobom, ako pridať obrázok na pozadí do tabuľky, je použitie CSS pozadie nehnuteľnosť. Ak sa chcete pripraviť na efektívne písanie CSS a vyhnete sa neočakávaným chybám v zobrazovaní, otvorte obrázok na pozadí a poznamenajte si výšku a šírku. Potom nahrajte svoj obrázok svojmu poskytovateľovi hostingu. Vyskúšajte adresu URL obrázka; jedným z najbežnejších dôvodov, prečo sa obrázky nezobrazujú, je skutočnosť, že v adrese URL je preklep.
Vložte blok štýlov CSS do hlavičky dokumentu:
Napíšte CSS pre pozadie na vašom stole a vložte ho do bloku štýlov:
Umiestnite tabuľku do kódu HTML:
bunka 1článok 2
bunka 1článok 2
Nastavte šírku a výšku tabuľky tak, aby zodpovedala šírke a výške obrázka.
Nastavte šírku a výšku tabuľky tak, aby zodpovedala šírke a výške obrázka.
Ak je obsah tabuľky väčší ako výška a šírka obrázka, obrázok na pozadí sa zobrazí iba raz.
Vložte pozadie iba na jeden stôl
Vyššie uvedené pokyny nastavia rovnaký obrázok na pozadí pre každú tabuľku na stránke. Ak chcete umiestniť pozadie iba na konkrétne tabuľky, použite a trieda atribút. Pridajte znak triedapozadie na ľubovoľnú tabuľku, ktorú chcete mať ako obrázok na pozadí. Nastavte šírku a výšku týchto stolov.
Nechajte obrázok na pozadí tabuľky opakovať
Väčšie tabuľky alebo tabuľky s väčším obsahom môžu vyžadovať opakovanie pozadia, aby sa vyplnila celá tabuľka. Zmeňte hodnotu v CSS tak, aby sa obraz opakoval na osi y, x a na oboch stranách.
background: url ("URL na obrázok") opakovať;
V predvolenom nastavení bude hodnota opakovania usporiadaná do dlaždíc, ale môžete tiež nastaviť hodnotu opakovania na.
opakuj-x
alebo
opakuj-y
obkladať vodorovne alebo zvisle.
Farby pozadia bunky blokujú obrázok na pozadí tabuľky
Akékoľvek farby pozadia nastavené na bunkách tabuľky prepíšu obrázok na pozadí tabuľky. Buďte opatrní, keď v bunkách použijete farby pozadia v kombinácii s obrázkami pozadia tabuľky.
Úvahy
Akýkoľvek obrázok, ktorý použijete, musí mať náležitú licenciu; to, že nájdete fotografiu na webe, ešte neznamená, že si ju môžete prispôsobiť pre svoje vlastné použitie. Rešpektujte autorské práva!
Pozadia tabuliek oddeľujú vaše tabuľky od základnej stránky. Pred použitím tejto techniky si to však dobre rozmyslite. Vloženie neutrálneho obrázka nemusí pôsobiť rušivo, ale zložité obrázky majú byť roztomilé (napríklad vloženie a. Obrázka) obrázok mačiatka za stolom označujúci adopcie domácich miláčikov) sa môžu javiť ako neprofesionálne a môžu mať vplyv na čitateľnosť the tabuľkové údaje.