Differentierande tabeller från deras bakgrund bidrar till att betona innehållet i tabellen i förhållande till allt annat på webbsidan. För att lägga till en tabellbakgrund behöver du tweak det cascading style sheet (CSS) som stöder din webbsida.
Komma igång
Det bästa sättet att lägga till en bakgrundsbild till en tabell är att använda CSS
bakgrund
fast egendom. Förbered dig själv för att skriva CSS effektivt och för att undvika oväntade visningsfel, öppna din bakgrundsbild och notera höjd och bredd. Ladda sedan upp din bild till din värdleverantör. Testa webbadressen för bilden; en av de vanligaste anledningarna till att bilder inte visas är att det finns ett typsnitt i webbadressen. När du har avslutat det steget lägger du ett CSS-stilblock i huvudet på ditt dokument:
bord {bakgrund: url (" URL till bild ") ingen upprepning;} Ställ in bredden och höjden på bordet för att matcha bildbredden och höjden. Om ditt bordsinnehåll är större än bildhöjd och bredd visas bakgrundsbilden enbart. Ovanstående instruktioner ställer in samma bakgrundsbild på varje tabell på sidan. Om du vill sätta bakgrunden på endast specifika tabeller måste du använda en klass
table.background {background: url (" URL till bild ") ingen upprepning;} Större tabeller eller tabeller med mer innehåll kan behöva ha bakgrundsrepetition så att hela tabellen är fylld. Ändra värdet i din CSS så att bilden upprepas på y-axeln, x-axeln eller är sida vid sida på båda. bakgrund: url ("URL till bild") upprepa;
Som standard är repetitionsvärdet kaklat, men du kan även ställa in upprepningsvärdet till upprepa-x
eller upprepa-y Eventuella bakgrundsfärger som ställs in på bordcellerna kommer att åsidosätta bakgrundsbilden på bordet. Var därför försiktig när du använder bakgrundsfärger på dina celler i kombination med tabellbakgrundsbilder. Tabellbakgrunden anger dina tabeller bortsett från den underliggande sidan. Tänk dock två gånger innan du använder den här tekniken. Att sätta in en neutral bild kan inte vara distraherande, men komplicerade bilder som är avsedda att vara söta (till exempel att infoga en bild av en kattunge bakom ett bord som indikerar husdjursanpassningar) kan tyckas oprofessionellt och kan påverka läsbarheten av tabelldata. Alla bilder du använder måste vara rätt licensierade. bara för att du kan hitta ett foto på webben betyder inte att du kan anpassa den till din egen användning. Respektera upphovsrätten!
cell 1 cell 2 cell 1 cell 2 …
Ställ en bakgrund på bara ett bord
class = "bakgrund" style = "width: 400px; height: 500px;> …
Låt tabellen Bakgrundsbild upprepa
att tegla horisontellt eller vertikalt.
Cellbakgrundsfärger Blockera tabellen Bakgrundsbild
överväganden
