Taulukoiden erottaminen niiden taustoista auttaa korostamaan taulukon sisältöä suhteessa kaikkeen muuhun verkkosivulla. Jos haluat lisätä taulukon taustan, sinun on tehtävä muutoksia CSS-tyylitaulukko Web-sivusi tukeminen.
Päästä alkuun
Paras tapa lisätä taustakuva taulukkoon on käyttää CSS: ää tausta omaisuus. Valmistaudu kirjoittamaan CSS tehokkaasti ja välttämään odottamattomat näytön häiriöt, avaamalla taustakuva ja tekemällä muistiin korkeus ja leveys. Lataa sitten kuva palveluntarjoajallesi. Testaa kuvan URL-osoite; yksi yleisimmistä syistä, miksi kuvia ei näytetä, johtuu siitä, että URL-osoitteessa on kirjoitusvirhe.
Lisää CSS-tyylilohko asiakirjan päähän:
Kirjoita CSS-taulukon taustaa varten ja laita se tyylilohkon sisään:
Sijoita taulukko HTML-koodiin:
solu 1osa 2
solu 1osa 2
Aseta taulukon leveys ja korkeus vastaamaan kuvan leveyttä ja korkeutta.
Aseta taulukon leveys ja korkeus vastaamaan kuvan leveyttä ja korkeutta.
Jos taulukon sisältö on suurempi kuin kuvan korkeus ja leveys, taustakuva näytetään vain kerran.
Laita tausta vain yhdelle pöydälle
Yllä olevat ohjeet asettavat saman taustakuvan jokaiselle sivun taulukolle. Lisää tausta vain tietyille taulukoille käyttämällä a luokassa määritteen. Lisää luokassatausta mihin tahansa taulukkoon, jonka taustakuvan haluat saada. Aseta näiden pöytien leveys ja korkeus.
Anna taulukon taustakuvan toistaa
Suurempien tai enemmän sisältöä sisältävien taulukoiden taustan on ehkä oltava toistettavissa, jotta koko taulukko täytetään. Muuta arvoa CSS: ssä niin, että kuva toistuu y-akselilla, x-akselilla tai on ruudullinen molemmille.
tausta: url ("kuvan URL") toista;
Oletusarvoisesti toistoarvo on kaakeloitu, mutta voit myös asettaa toiston arvoksi.
toista-x
tai.
toista-y
laatoittaa vaaka- tai pystysuunnassa.
Solun taustavärit estävät taulukon taustakuvan
Kaikki taustavärit taulukossa asetetut solut ohittavat taulukon taustakuvan. Joten ole varovainen, kun käytät solujen taustavärejä yhdessä taulukon taustakuvien kanssa.
Huomioita
Kaikilla käyttämilläsi kuvilla on oltava asianmukainen käyttöoikeus; Se, että löydät valokuvan verkosta, ei tarkoita sitä, että voit sovittaa sen omaan käyttöön. Kunnioita tekijänoikeuksia!
Taulukon taustat erottavat taulukot taustalla olevasta sivusta. Ajattele kuitenkin kahdesti ennen tämän tekniikan käyttämistä. Neutraalin kuvan lisääminen ei välttämättä häiritse, mutta monimutkaisia kuvia, jotka on tarkoitettu söpöiksi (esimerkiksi lisäämällä a kuva kissanpennusta pöydän takana, joka osoittaa lemmikkieläinten adoptiot) saattaa tuntua epäammattimaiselta ja vaikuttaa levyn luettavuuteen taulukkotiedot.