Setarea unei imagini ca fundal pentru un tabel pe o pagină web

Diferențierea tabelelor de mediile lor ajută la sublinierea conținutului tabelului față de orice altceva de pe pagina web. Pentru a adăuga un fundal de tabel, va trebui să modificați fișierul foaie de stil în cascadă sprijinirea paginii dvs. web.

Clădiri moderne de birouri care fac parte din Regenerarea Peninsulei Greenwich, Sud-Estul Londrei, Marea Britanie
Fotografie de construcție / Avalon / Getty Images

Noțiuni de bază

Cel mai bun mod de a adăuga o imagine de fundal într-un tabel este să utilizați CSS fundal proprietate. Pentru a vă pregăti să scrieți CSS eficient și pentru a evita erorile neașteptate de afișare, deschideți imaginea de fundal și notați înălțimea și lățimea. Apoi încărcați imaginea la furnizorul dvs. de găzduire. Testați adresa URL pentru imagine; unul dintre cele mai frecvente motive pentru care imaginile nu se afișează este că există o greșeală de tipar în URL.

Introduceți un bloc de stil CSS în capul documentului:


Scrieți CSS pentru fundal pe masa dvs. și puneți-l în blocul de stil:

Plasați tabelul în HTML:

celula 1cel 2
celula 1cel 2
Setați lățimea și înălțimea mesei pentru a se potrivi cu lățimea și înălțimea imaginii.

instagram viewer

Setați lățimea și înălțimea mesei pentru a se potrivi cu lățimea și înălțimea imaginii.

Dacă conținutul tabelului dvs. este mai mare decât înălțimea și lățimea imaginii, imaginea de fundal se va afișa o singură dată.

Puneți un fundal pe o singură masă

Instrucțiunile de mai sus vor seta aceeași imagine de fundal pe fiecare masă de pe pagină. Pentru a pune fundalul doar pe anumite tabele, utilizați un clasă atribut. Adaugă clasăfundal la orice tabel pe care doriți să aveți acea imagine de fundal. Setați lățimea și înălțimea tabelelor respective.

Să se repete imaginea de fundal a tabelului

Tabelele mai mari sau tabelele cu mai mult conținut ar putea avea nevoie să se repete fundalul, astfel încât întregul tabel să fie umplut. Schimbați valoarea din CSS, astfel încât imaginea să se repete pe axa y, axa x sau să fie plăcută pe ambele.

fundal: url ("URL către imagine") repetați; 

În mod implicit, valoarea de repetare va fi plasată în dale, dar puteți seta și valoarea de repetare la.

repeta-x

sau.

repeta-y

pentru a țiglă orizontal sau respectiv vertical.

Culorile fundalului celulei blochează imaginea de fundal a tabelului

Orice culori de fundal setat pe tabel celulele înlocuiesc imaginea de fundal pe masă. Așadar, aveți grijă când utilizați culorile de fundal pe celulele dvs. în combinație cu imaginile de fundal ale tabelului.

Considerații

Orice imagine pe care o utilizați trebuie să fie licențiată corespunzător; Doar pentru că poți găsi o fotografie pe web nu înseamnă că o poți apropia de propria ta utilizare. Respectă drepturile de autor!

Fundalurile tabelelor diferențiază tabelele de pagina subiacentă. Cu toate acestea, gândiți-vă de două ori înainte de a utiliza această tehnică. Introducerea unei imagini neutre poate să nu distragă atenția, dar imaginile complicate intenționate să fie drăguțe (de exemplu, inserarea unui imaginea unui pisoi în spatele unei mese care indică adopțiile animalelor de companie) poate părea neprofesionistă și poate afecta lizibilitatea date tabulare.

instagram story viewer