Indstilling af et billede som baggrund for en tabel på en webside

The best protection against click fraud.

At differentiere tabeller fra deres baggrund hjælper med at understrege indholdet af tabellen i forhold til alt andet på websiden. For at tilføje en tabelbaggrund skal du foretage ændringer i kaskadestilark understøtter din webside.

Moderne kontorbygninger, der er en del af Greenwich Peninsula Regeneration, South East London, UK
Konstruktionsfotografering / Avalon / Getty Images

Kom godt i gang

Den bedste måde at føje et baggrundsbillede til en tabel er at bruge CSS baggrund ejendom. For at forberede dig på at skrive CSS effektivt og undgå uventede fejl i displayet skal du åbne dit baggrundsbillede og notere højden og bredden. Upload derefter dit billede til din hostingudbyder. Test webadressen til billedet; en af ​​de mest almindelige grunde til, at billeder ikke vises, er fordi der er en skrivefejl i URL'en.

Indsæt en CSS-stilblok i dokumentets hoved:


Skriv din CSS til baggrunden på dit bord og læg den inde i stilblokken:

Placer dit bord i HTML:

celle 1celle 2
celle 1celle 2
Indstil bredden og højden på tabellen, så den passer til billedets bredde og højde.

Indstil bredden og højden på tabellen, så den passer til billedets bredde og højde.

instagram viewer

Hvis dit bordindhold er større end billedets højde og bredde, vises baggrundsbilledet kun en gang.

Sæt en baggrund på bare et bord

Ovenstående instruktioner indstiller det samme baggrundsbillede på hver tabel på siden. Brug a for at sætte baggrunden på specifikke tabeller klasse attribut. Tilføj klassebaggrund til enhver tabel, du vil have det baggrundsbillede. Indstil bredden og højden for disse borde.

Lad tabelbaggrundsbilledet gentages

Større tabeller eller tabeller med mere indhold skal muligvis have baggrunden gentaget, så hele tabellen er fyldt. Skift værdien i din CSS, så billedet gentages på y-aksen, x-aksen eller er flisebelagt på begge.

baggrund: url ("URL til billede") gentag; 

Som standard vil gentagelsesværdien blive flisebelagt, men du kan også indstille gentagelsesværdien til.

gentag-x

eller.

gentag-y

for at flise henholdsvis vandret eller lodret.

Cellebaggrundsfarver blokerer baggrundsbillede af tabellen

Eventuelle baggrundsfarver indstillet på bordcellerne tilsidesætter baggrundsbilledet på bordet. Så vær forsigtig, når du bruger baggrundsfarver på dine celler i kombination med tabelbaggrundsbilleder.

Overvejelser

Ethvert billede, du bruger, skal være licenseret korrekt; bare fordi du kan finde et foto på nettet, betyder det ikke, at du kan tilpasse det til eget brug. Respekter ophavsretten!

Tabelbaggrunde adskiller dine tabeller fra den underliggende side. Men tænk to gange, før du bruger denne teknik. Indsættelse af et neutralt billede er måske ikke distraherende, men komplicerede billeder, der er beregnet til at være søde (f.eks. Indsættelse af en billede af en killing bag et bord, der indikerer adoption af kæledyr) kan forekomme uprofessionelt og kan påvirke læsbarheden af det tabeldata.

instagram story viewer