Å skille tabeller fra bakgrunnen bidrar til å understreke innholdet i tabellen i forhold til alt annet på websiden. For å legge til en tabellbakgrunn, må du gjøre endringer i cascading stilark støtter websiden din.
Starter
Den beste måten å legge til et bakgrunnsbilde i en tabell er å bruke CSS bakgrunn eiendom. For å forberede deg på å skrive CSS effektivt og unngå uventede feil på skjermen, åpne bakgrunnsbildet og noter høyden og bredden. Last deretter opp bildet ditt til vertsleverandøren din. Test URL-en for bildet; en av de vanligste årsakene til at bilder ikke vises, er fordi det er en skrivefeil i URL-en.
Sett inn en CSS-stilblokk i hodet på dokumentet:
Skriv CSS for bakgrunnen på bordet og legg det inne i stilblokken:
Plasser bordet i HTML:
celle 1celle 2
celle 1celle 2
Still inn bredden og høyden på tabellen slik at den samsvarer med bildebredden og høyden.
Still inn bredden og høyden på tabellen slik at den samsvarer med bildebredden og høyden.
Hvis tabellinnholdet ditt er større enn høyde og bredde på bildet, vil bakgrunnsbildet bare vises en gang.
Sett en bakgrunn på bare ett bord
Ovennevnte instruksjoner vil sette det samme bakgrunnsbildet på hvert bord på siden. For å sette bakgrunnen på bare bestemte tabeller, bruk a klasse Egenskap. Legg til klassebakgrunn til hvilken som helst tabell du vil ha det bakgrunnsbildet. Still inn bredden og høyden for disse bordene.
La tabellets bakgrunnsbilde gjenta seg
Større tabeller, eller tabeller med mer innhold, må kanskje ha bakgrunnen gjentatt slik at hele tabellen fylles. Endre verdien i CSS slik at bildet gjentas på y-aksen, x-aksen eller er flislagt på begge.
bakgrunn: url ("URL til bilde") gjenta;
Gjentaverdien blir som standard flislagt, men du kan også sette gjenta verdien til.
gjenta-x
eller.
gjenta-y
å flise henholdsvis vannrett eller loddrett.
Cellebakgrunnsfarger blokkerer tabellets bakgrunnsbilde
Eventuelle bakgrunnsfarger satt på bordcellene overstyrer bakgrunnsbildet på bordet. Så vær forsiktig når du bruker bakgrunnsfarger på cellene i kombinasjon med bakgrunnsbilder i tabellen.
Hensyn
Ethvert bilde du bruker, må være lisensiert; bare fordi du kan finne et bilde på nettet, betyr ikke det at du kan tilpasse det til eget bruk. Respekter opphavsrett!
Tabellbakgrunner skiller tabellene fra den underliggende siden. Tenk imidlertid to ganger før du bruker denne teknikken. Å sette inn et nøytralt bilde er kanskje ikke distraherende, men kompliserte bilder ment å være søte (for eksempel å sette inn et bilde av en kattunge bak et bord som indikerer adopsjon av kjæledyr) kan virke uprofesjonelt og kan påvirke lesbarheten av de tabelldata.