Att skilja tabeller från deras bakgrund hjälper till att betona innehållet i tabellen i förhållande till allt annat på webbsidan. För att lägga till en tabellbakgrund måste du göra ändringar i kaskad stilark stödja din webbsida.
Komma igång
Det bästa sättet att lägga till en bakgrundsbild i en tabell är att använda CSS bakgrund fast egendom. För att förbereda dig för att skriva CSS effektivt och för att undvika oväntade visningsfel, öppna din bakgrundsbild och anteckna höjd och bredd. Ladda sedan upp din bild till din webbhotell. Testa webbadressen för bilden; en av de vanligaste orsakerna till att bilder inte visas beror på att det finns ett skrivfel i webbadressen.
Infoga ett CSS-stilblock i dokumentets huvud:
Skriv din CSS för bakgrunden på ditt bord och lägg den i stilblocket:
Placera ditt bord i HTML:
cell 1cell 2
cell 1cell 2
Ställ in bordets bredd och höjd så att den matchar bildens bredd och höjd.
Ställ in bordets bredd och höjd så att den matchar bildens bredd och höjd.
Om innehållet i din tabell är större än bildens höjd och bredd visas bakgrundsbilden bara en gång.
Lägg en bakgrund på bara ett bord
Ovanstående instruktioner ställer in samma bakgrundsbild på varje tabell på sidan. Använd a för att lägga bakgrunden till specifika tabeller klass attribut. Lägg till klassbakgrund till vilken tabell du vill ha den bakgrundsbilden. Ställ in bredden och höjden för dessa bord.
Låt tabellens bakgrundsbild upprepas
Större tabeller eller tabeller med mer innehåll kan behöva upprepa bakgrunden så att hela tabellen fylls. Ändra värdet i din CSS så att bilden upprepas på y-axeln, x-axeln eller är kaklad på båda.
bakgrund: url ("URL till bild") upprepa;
Som standard kommer upprepningsvärdet att läggas på, men du kan också ställa in upprepningsvärdet till.
repetera-x
eller.
upprepa-y
för att plattor horisontellt respektive vertikalt.
Cellbakgrundsfärger blockerar tabellens bakgrundsbild
Eventuella bakgrundsfärger på tabellcellerna åsidosätter bakgrundsbilden på bordet. Så var försiktig när du använder bakgrundsfärger på dina celler i kombination med tabellbakgrundsbilder.
Överväganden
Alla bilder du använder måste vara licensierade på rätt sätt. bara för att du kan hitta ett foto på webben betyder det inte att du kan anpassa det för eget bruk. Respektera upphovsrätten!
Tabellbakgrunder skiljer dina tabeller från den underliggande sidan. Tänk dock två gånger innan du använder den här tekniken. Att infoga en neutral bild kanske inte är distraherande, men komplicerade bilder som är avsedda att vara söta (till exempel infoga en bilden av en kattunge bakom ett bord som visar att adopteringen av husdjur) kan verka oprofessionell och kan påverka läsbarheten av de tabelldata.