Comment définir une image comme arrière-plan pour un tableau

Utilisez la propriété CSS background pour ajouter une image d'arrière-plan aux tableaux

Différencier les tableaux de leurs arrière-plans permet de mettre l'accent sur le contenu du tableau par rapport à tout le reste de la page Web. Pour ajouter un arrière-plan de tableau, vous devrez apporter des modifications au feuille de style en cascade soutenir votre page Web.

Photographie de construction / Avalon / Getty Images

Commencer

La meilleure façon d'ajouter une image de fond à un tableau est d'utiliser le CSS Contexte propriété. Pour vous préparer à écrire le CSS efficacement et éviter les problèmes d'affichage inattendus, ouvrez votre image d'arrière-plan et notez la hauteur et la largeur. Téléchargez ensuite votre image sur votre hébergeur. Testez l'URL de l'image ; l'une des raisons les plus courantes pour lesquelles les images ne s'affichent pas est qu'il y a une faute de frappe dans l'URL.

Insérez un bloc de style CSS dans l'en-tête de votre document :

|__+_|

Par défaut, la valeur de répétition sera en mosaïque, mais vous pouvez également définir la valeur de répétition sur

|__+_|

ou

|__+_|

pour carreler horizontalement ou verticalement, respectivement.

Les couleurs d'arrière-plan des cellules bloquent l'image d'arrière-plan du tableau

Toutes les couleurs de fond défini sur les cellules du tableau remplacent l'image d'arrière-plan sur le tableau. Soyez donc prudent lorsque vous utilisez des couleurs d'arrière-plan sur vos cellules en combinaison avec des images d'arrière-plan de tableau.

Considérations

Toute image que vous utilisez doit faire l'objet d'une licence appropriée ; Ce n'est pas parce que vous pouvez trouver une photo sur le web que vous pouvez vous l'approprier pour votre propre usage. Respectez les droits d'auteur !

Les arrière-plans de tableau distinguent vos tableaux de la page sous-jacente. Cependant, réfléchissez-y à deux fois avant d'utiliser cette technique. L'insertion d'une image neutre peut ne pas être distrayante, mais des images compliquées destinées à être mignonnes (par exemple, insérer une image d'un chaton derrière une table indiquant l'adoption d'animaux de compagnie) peuvent sembler non professionnelles et peuvent affecter la lisibilité du