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.
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 efficacement le CSS et éviter les problèmes d'affichage inattendus, ouvrez votre image d'arrière-plan et notez la hauteur et la largeur. Ensuite, téléchargez 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:
Écrivez votre CSS pour l'arrière-plan de votre tableau et placez-le dans le bloc de style:
Placez votre tableau dans le HTML:
cellule 1cellule 2
cellule 1cellule 2
Définissez la largeur et la hauteur du tableau pour qu'elles correspondent à la largeur et à la hauteur de l'image.
Définissez la largeur et la hauteur du tableau pour qu'elles correspondent à la largeur et à la hauteur de l'image.
Si le contenu de votre tableau est plus grand que la hauteur et la largeur de l'image, l'image d'arrière-plan ne s'affichera qu'une seule fois.
Mettez un arrière-plan sur une seule table
Les instructions ci-dessus définiront la même image d'arrière-plan sur chaque tableau de la page. Pour mettre l'arrière-plan sur des tables spécifiques uniquement, utilisez un classer attribut. Ajouter le classerContexte à n'importe quelle table que vous voulez avoir cette image d'arrière-plan. Définissez la largeur et la hauteur de ces tables.
Laissez l'image d'arrière-plan du tableau se répéter
Les tableaux plus grands ou les tableaux avec plus de contenu peuvent nécessiter une répétition de l'arrière-plan afin que le tableau entier soit rempli. Modifiez la valeur dans votre CSS afin que l'image se répète sur l'axe des y, l'axe des x ou soit en mosaïque sur les deux.
arrière-plan: url ("URL vers l'image") répéter;
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.
répéter-x
ou alors.
répéter-y
à 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 les cellules définies sur le tableau remplacent l'image d'arrière-plan du 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 avoir 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 des tableaux 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 gênante, mais des images compliquées destinées à être mignonnes (par exemple, l'insertion d'un photo d'un chaton derrière une table indiquant les adoptions d'animaux de compagnie) peut sembler non professionnel et peut affecter la lisibilité de les données tabulaires.