Huvud webbdesign & dev Hur man ställer in en bild som bakgrund för en tabell
webbdesign & dev

Hur man ställer in en bild som bakgrund för en tabell

Hur man ställer in en bild som bakgrund för en tabell
Anonim

Använd CSS-bakgrundsegenskapen för att lägga till en bildbakgrund i tabeller

  • html
  • CSS
  • avJennifer Kyrnin

    En publicerad författare med omfattande skapande och hantering av webbplatser.

    Att differentiera tabeller från deras bakgrund hjälper till att betona innehållet i tabellen relativt allt annat på webbsidan. För att lägga till en tabellbakgrund måste du finjustera det kaskadformade formatmallen som stöder din webbsida.

    Komma igång

    Det bästa sättet att lägga till en bakgrundsbild i en tabell är att använda CSS- bakgrundsegenskapen . För att förbereda dig på att skriva CSS effektivt och för att undvika oväntade visningsglömmar, öppna din bakgrundsbild och notera höjd och bredd. Ladda sedan upp din bild till din webbhotell. Testa webbadressen för bilden; ett av de vanligaste orsakerna till att bilder inte visas är att det finns en skrivfel i URL: n.

    Sätt i ett CSS-stilblock i huvudet på ditt dokument:

    Skriv din CSS för bakgrunden på ditt bord och lägg den in 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 bildbredden och höjden:

    Om tabellinnehållet är större än bildens höjd och bredd visas bakgrunden bara en gång.

    Lägg en bakgrund på bara ett bord

    Ovanstående instruktioner anger samma bakgrundsbild på varje tabell på sidan. Om du bara vill lägga bakgrunden på specifika tabeller använder du ett klassattribut.vÄndra din CSS för att läsa:

    Lägg till klassbakgrunden till alla tabeller du vill ha den bakgrundsbilden. Ställ in bredden och höjden för dessa bord.

    Låt tabellbakgrundsbilden upprepa

    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 lutas på båda.

    bakgrund: url ("URL till bild") upprepa;

    Som standard lutas upprepningsvärdet, men du kan också ställa upprepningsvärdet till

    upprepa-x

    eller

    upprepa-y

    att kakel horisontellt respektive vertikalt.

    Cellbakgrundsfärger blockerar tabellen bakgrundsbild

    Alla bakgrundsfärger som ställs in på tabellcellerna kommer att åsidosätta bakgrundsbilden på bordet. Så var försiktig när du använder bakgrundsfärger på dina celler i kombination med bakgrundsbilder i tabellen.

    överväganden

    Alla bilder du använder måste vara korrekt licensierade. bara för att du kan hitta ett foto på webben betyder det inte att du kan anpassa det för ditt 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 att infoga en bild av en kattunge bakom ett bord som indikerar husdjuradoptioner) kan verka oprofessionellt och kan påverka läsbarheten för tabelluppgifterna.