Differenziare le tabelle dai loro sfondi aiuta a enfatizzare il contenuto della tabella rispetto a tutto il resto della pagina web. Per aggiungere uno sfondo della tabella, dovrai apportare modifiche al foglio di stile a cascata supportare 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 il CSS in modo efficace ed evitare problemi di visualizzazione imprevisti, apri l'immagine di sfondo e prendi nota dell'altezza e della larghezza. Quindi carica la tua immagine sul tuo provider di hosting. Prova 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.
Inserisci un blocco di stile CSS nell'intestazione del documento:
Scrivi il tuo CSS per lo sfondo sul tuo tavolo e inseriscilo nel blocco di stile:
Inserisci la tua tabella nell'HTML:
cella 1cella 2
cella 1cella 2
Imposta la larghezza e l'altezza della tabella in modo che corrispondano alla larghezza e all'altezza dell'immagine.
Imposta la larghezza e l'altezza della tabella in modo che corrispondano alla larghezza e all'altezza dell'immagine.
Se il contenuto della tabella è più grande dell'altezza e della larghezza dell'immagine, l'immagine di sfondo verrà visualizzata solo una volta.
Metti uno sfondo su un solo tavolo
Le istruzioni di cui sopra imposteranno la stessa immagine di sfondo su ogni tabella della pagina. Per mettere lo sfondo solo su tabelle specifiche, usa a classe attributo. Aggiungi il classesfondo a qualsiasi tabella in cui desideri avere quell'immagine di sfondo. Imposta la larghezza e l'altezza per quelle tabelle.
Lascia che l'immagine di sfondo del tavolo si ripeta
Per le tabelle più grandi o con più contenuto potrebbe essere necessario ripetere lo sfondo in modo da riempire l'intera tabella. Modifica il valore nel tuo CSS in modo che l'immagine si ripeta sull'asse y, sull'asse x o sia affiancata su entrambi.
sfondo: url("URL all'immagine") ripeti;
Per impostazione predefinita, il valore di ripetizione verrà affiancato, ma puoi anche impostare il valore di ripetizione su.
ripeti-x
o.
ripeti-y
per affiancare orizzontalmente o verticalmente, rispettivamente.
I colori di sfondo delle celle bloccano l'immagine di sfondo della tabella
Qualsiasi colore di sfondo impostate sulle celle della tabella sovrascrivono l'immagine di sfondo sulla tabella. Quindi fai attenzione quando usi i colori di sfondo sulle tue celle in combinazione con le immagini di sfondo della tabella.
Considerazioni
Qualsiasi immagine che usi deve essere adeguatamente autorizzata; solo perché puoi trovare una foto sul web non significa che puoi appropriartene per il tuo uso personale. Rispetta i diritti d'autore!
Gli sfondi delle tabelle distinguono le tabelle dalla pagina sottostante. Tuttavia, pensaci due volte prima di utilizzare questa tecnica. L'inserimento di un'immagine neutra potrebbe non essere fonte di distrazione, ma immagini complicate intese per essere carine (ad esempio, inserire un immagine di un gattino dietro un tavolo che indica l'adozione di animali domestici) può sembrare poco professionale e può influire sulla leggibilità di il dati tabulari.