Differensierende tabeller fra bakgrunnen bidrar til å understreke innholdet i tabellen i forhold til alt annet på nettsiden. Hvis du vil legge til en tabellbakgrunn, må du justere det kaskade stilarket (CSS) som støtter nettsiden din.
Starter
Den beste måten å legge til et bakgrunnsbilde på i et bord er å bruke CSS
bakgrunn
eiendom. For å forberede deg til å skrive CSS effektivt og for å unngå uventede visningsfeil, åpne bakgrunnsbildet og noter høyde og bredde. Last opp bildet ditt til webområdet ditt. Test nettadressen for bildet; en av de vanligste årsakene til at bildene ikke vises, er fordi det er en skrivefeil i nettadressen. Når du er ferdig med dette trinnet, legger du en CSS-stilblokk i hodet på dokumentet ditt:
bord {bakgrunn: url (" URL til bilde ") ikke-gjenta;} Sett bredde og høyde på bordet for å matche bildebredden og høyden. Hvis tabellinnholdet ditt er større enn bildehøyden og bredden, vises bakgrunnsbildet bare en gang. Ovennevnte instruksjoner vil angi det samme bakgrunnsbildet på hvert bord på siden. Hvis du vil sette bakgrunnen på bare bestemte tabeller, må du bruke en klasse
table.background {bakgrunn: url (" URL til bilde ") ikke-gjenta;} Større tabeller, eller tabeller med mer innhold, må kanskje ha bakgrunnsrepetisjonen slik at hele tabellen er fylt. Endre verdien i CSS slik at bildet gjentar på y-aksen, x-aksen, eller er flislagt på begge. bakgrunn: url ("URL til bilde") gjenta;
Som standard vil repetisjonsverdien bli flislagt, men du kan også sette gjentaksverdien til repeat-x
eller repeat-y Eventuelle bakgrunnsfarger satt på tabellcellene vil tilsidesette bakgrunnsbildet på bordet. Så vær forsiktig når du bruker bakgrunnsfarger på cellene dine i kombinasjon med tabellbakgrunnsbilder. Tabellbakgrunnene vil sette tabellene dine bortsett fra den underliggende siden. Men tenk to ganger før du bruker denne teknikken. Innføring av et nøytralbilde kan ikke være distraherende, men kompliserte bilder som er ment å være søte (for eksempel å sette inn et bilde av en kattunge bak et bord som indikerer kjæledyrtiltak) kan virke uprofesjonelt og kan påvirke lesbarheten av tabelldataene. Alt bilde du bruker må være riktig lisensiert. bare fordi du kan finne et bilde på nettet, betyr ikke at du kan tilpasse det til eget bruk. Respekter opphavsrettene!
celle 1 celle 2 celle 1 celle 2 …
Sett en bakgrunn på bare ett bord
class = "bakgrunn" style = "width: 400px; height: 500px;> …
La tabellen bakgrunnsbilde gjenta
til flis horisontalt eller vertikalt, henholdsvis.
Cell Bakgrunnsfarger Blokker Tabell Bakgrunnsbilde
betraktninger
