Použite vlastnosť pozadia CSS na pridanie pozadia obrázka do tabuliek
Rozlíšenie tabuliek od ich pozadia pomáha zdôrazniť obsah tabuľky vzhľadom na všetko ostatné na webovej stránke. Ak chcete pridať pozadie tabuľky, musíte vylepšiť kaskádový štýl (CSS), ktorý podporuje vašu webovú stránku.
Začíname
Najlepším spôsobom, ako pridať obrázok pozadia do tabuľky, je použiť vlastnosť pozadia CSS. Aby ste sa pripravili na efektívne písanie CSS a zabránili neočakávaným výpadkom displeja, otvorte obrázok na pozadí a poznačte výšku a šírku.
Potom odovzdajte obrázok vášmu poskytovateľovi hostingu. Otestujte adresu URL obrázka; jeden z najčastejších dôvodov, prečo sa obrázky nezobrazujú, je preto, že sa v adrese URL nachádza preklep.
Po dokončení tohto kroku vložte do hlavnej časti dokumentu blok CSS štýlu:
- Napíšte svoj CSS na pozadí na stole a vložte ho do štýlu:
tabuľka {background: url (" URL na obrázok ") no-repeat; }
- Umiestnite svoj tabuľku do HTML:
bunka 1
bunka 2
bunka 1
bunka 2
- Nastavte šírku a výšku tabuľky tak, aby zodpovedali šírke a výške obrázka.
šírka: 400px; výška: 500px; "> ...
Ak je obsah tabuľky väčší ako výška a šírka obrázka, obrázok pozadia sa zobrazí iba raz.
Umiestnite pozadie len na jednu tabuľku
Vyššie uvedené pokyny nastavia rovnaký obrázok na pozadí na každej tabuľke na stránke.
Ak chcete umiestniť pozadie len na konkrétne tabuľky, musíte použiť atribút triedy.
- Zmeňte svoj CSS na čítanie:
table.background {background: url (" URL na obrázok ") no-repeat; }
- Pridajte pozadie triedy do akejkoľvek tabuľky, ktorú chcete vytvoriť. Nastavte šírku a výšku pre tieto tabuľky.
class = "background" style = "šírka: 400px; výška: 500px;> ...
Nechajte obrázok pozadia tabuľky opakovať
Väčšie tabuľky alebo tabuľky s väčším obsahom môžu vyžadovať opakovanie pozadia tak, aby bola vyplnená celá tabuľka. Zmeňte hodnotu v CSS tak, aby sa obraz opakoval na osi y, na osi x alebo na oboch.
pozadie: url (" URL na obrázok ") opakovať ;
V predvolenom nastavení bude opakovaná hodnota dlažba, ale môžete tiež nastaviť hodnotu opakovania na opakovanie-x alebo opakovanie-y na dlažbu horizontálne alebo vertikálne.
Farby pozadia bunky blokujú obrázok na pozadí tabuľky
Všetky farby pozadia nastavené na bunky tabuľky budú prepísať obrázok pozadia v tabuľke. Takže buďte opatrní pri používaní farieb pozadia na bunkách v kombinácii s obrázkami na pozadí tabuľky.
dôležité informácie
Pozadie tabuľky nastavia vaše tabuľky na rozdiel od podkladovej stránky. Pred použitím tejto techniky si však dvakrát premyslite. Vloženie neutrálneho obrázka nemusí byť rušivé, ale komplikované obrázky, ktoré majú byť roztomilé (napríklad vkladanie obrázka mačiatka za stôl s označením osvojenia zvierat), sa môžu zdať neprofesionálne a môžu mať vplyv na čitateľnosť tabuľkových údajov .
Každý obrázok, ktorý používate, musí byť riadne licencovaný. len preto, že môžete nájsť fotografiu na webe, neznamená to, že ju môžete použiť pre svoje vlastné použitie.
Respektujte autorské práva!
- Nastavte šírku a výšku tabuľky tak, aby zodpovedali šírke a výške obrázka.