La differenziazione delle tabelle dai loro sfondi aiuta a enfatizzare il contenuto della tabella rispetto a tutto il resto della pagina web. Per aggiungere uno sfondo di una tabella, devi modificare il foglio di stile CSS (CSS) che supporta la tua pagina web.
Iniziare
Il modo migliore per aggiungere un'immagine di sfondo a una tabella è usare il CSS
sfondo
proprietà. Per prepararti a scrivere efficacemente il CSS e per evitare problemi di visualizzazione imprevisti, apri la tua immagine di sfondo e prendi nota dell'altezza e della larghezza. Quindi carica la tua immagine al tuo fornitore di hosting. Testare l'URL per l'immagine; uno dei motivi più comuni per cui le immagini non vengono visualizzate è perché c'è un errore di battitura nell'URL.Dopo aver terminato questo passaggio, inserisci un blocco di stile CSS all'inizio del documento:
table {background: url (" URL all'immagine ") no-repeat;} Imposta la larghezza e l'altezza della tabella in modo che corrisponda alla larghezza e all'altezza dell'immagine. Se il contenuto della tabella è maggiore dell'altezza e della larghezza dell'immagine, l'immagine di sfondo verrà visualizzata solo una volta. Le istruzioni precedenti imposteranno la stessa immagine di sfondo su ogni tabella sulla pagina. Se vuoi mettere lo sfondo solo su tabelle specifiche, devi usare a classe
table.background {background: url (" URL all'immagine ") no-repeat;} Le tabelle più grandi o le tabelle con più contenuti potrebbero richiedere la ripetizione dello sfondo per riempire l'intera tabella. Cambia il valore nel tuo CSS in modo che l'immagine si ripeta sull'asse y, sull'asse x o sia affiancata su entrambi. background: url ("URL per immagine") ripetizione;
Per impostazione predefinita, il valore di ripetizione verrà affiancato, ma è anche possibile impostare il valore di ripetizione su repeat-x
o repeat-y Qualsiasi colore di sfondo impostato sulle celle della tabella sovrascriverà l'immagine di sfondo sul tavolo. Quindi fai attenzione quando usi i colori di sfondo sulle tue celle in combinazione con le immagini di sfondo della tabella. Gli sfondi di una tabella imposteranno i tuoi tavoli separatamente dalla pagina sottostante. Tuttavia, pensaci due volte prima di usare questa tecnica. L'inserimento di un'immagine neutra potrebbe non essere fonte di distrazione, ma le immagini complicate destinate ad essere carine (ad esempio, l'inserimento di un'immagine di un gattino dietro una tabella che indica le adozioni degli animali domestici) potrebbero apparire poco professionali e compromettere la leggibilità dei dati tabulari. Qualsiasi immagine che si utilizza deve essere correttamente concessa in licenza; solo perché è possibile trovare una foto sul Web non significa che è possibile appropriarsene per il proprio uso. Rispetta i diritti d'autore!
cella 1 cella 2 cella 1 cella 2 …
Metti uno sfondo su un solo tavolo
class = "background" style = "width: 400px; height: 500px;> …
Lasciare ripetere l'immagine di sfondo della tabella
piastrellare orizzontalmente o verticalmente, rispettivamente.
Colori di sfondo della cella Bloccano l'immagine di sfondo della tabella
considerazioni
