Effet ombre sur les tableaux HTML avec CSS
Les tableaux HTML peuvent être embellis grâce à la propriété CSS box-shadow
qui permet d'ajouter des effets d'ombre portée. Voici différentes manières d'appliquer cet effet sur vos tableaux.
Syntaxe de la propriété box-shadow
La propriété CSS box-shadow
permet de créer des ombres portées autour de vos éléments HTML. La syntaxe de cette propriété est la suivante :
box-shadow: offset-x offset-y blur spread color;
offset-x
: détermine le décalage horizontal de l'ombre par rapport à l'élément. Une valeur positive décale l'ombre vers la droite, une valeur négative vers la gauche.offset-y
: détermine le décalage vertical de l'ombre par rapport à l'élément. Une valeur positive décale l'ombre vers le bas, une valeur négative vers le haut.blur
: définit le flou de l'ombre. Plus la valeur est élevée, plus l'ombre sera floue et étalée.spread
: élargit ou rétrécit la taille de l'ombre. Une valeur positive l'agrandit, une valeur négative la réduit.color
: définit la couleur de l'ombre.
Ajouter une ombre à un tableau
Pour ajouter une ombre à un tableau, il suffit de créer une classe CSS et d'y appliquer la propriété box-shadow
:
.table-shadow {
box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.3);
}
Ici, l'ombre est décalée de 2 pixels vers la droite et de 2 pixels vers le bas, son flou est de 5 pixels, sa taille est par défaut et sa couleur est un noir semi-transparent.
Ensuite, il suffit d'ajouter la classe table-shadow
à votre tableau :
<table class="table-shadow">
<!-- contenu du tableau -->
</table>
Ajouter une ombre seulement sur les bords
Si vous souhaitez ajouter une ombre seulement sur les bords de votre tableau, il faut utiliser la propriété box-shadow
sur chacun des côtés :
.table-shadow {
box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.3),
0px 0px 5px rgb(0, 0, 0, 0.3),
0px 0px 5px rgb(0, 0, 0, 0.3),
0px 0px 5px rgb(0, 0, 0, 0.3);
}
Ici, l'ombre est ajoutée sur le haut, le bas, la gauche et la droite du tableau.
Ajouter une ombre sur une ligne de tableau
Pour ajouter une ombre sur une ligne de tableau, il faut ajouter la propriété box-shadow
à la balise <tr>
:
tr.shadow {
box-shadow: 0px 2px 5px rgb(0, 0, 0, 0.3);
}
Ici, l'ombre est ajoutée sous la ligne grâce au décalage vertical de 2 pixels.
Ensuite, il suffit d'ajouter la classe shadow
à la ligne de votre tableau :
<table>
<tr>
<td>Contenu de la ligne</td>
</tr>
<tr class="shadow">
<td>Contenu de la ligne avec ombre</td>
</tr>
</table>
Ajouter une ombre sur une colonne de tableau
Pour ajouter une ombre sur une colonne de tableau, il faut ajouter la propriété box-shadow
à la balise <td>
:
td.shadow {
box-shadow: 2px 0px 5px rgb(0, 0, 0, 0.3);
}
Ici, l'ombre est ajoutée sur la gauche de la cellule grâce au décalage horizontal de 2 pixels.
Ensuite, il suffit d'ajouter la classe shadow
à la cellule de votre tableau :
<table>
<tr>
<td>Contenu de la cellule</td>
<td class="shadow">Contenu de la cellule avec ombre</td>
</tr>
<tr>
<td>Contenu de la cellule</td>
<td>Contenu de la cellule</td>
</tr>
</table>
Conclusion
La propriété CSS box-shadow
est une méthode simple et élégante pour ajouter des ombres portées à vos tableaux HTML. En jouant avec les différents paramètres, vous pouvez personnaliser l'effet d'ombre à votre guise. N'hésitez pas à expérimenter avec cette propriété pour créer des tableaux originaux et esthétiques.
Références :
Les ombrages en CSS3 - Alsacreations
www.alsacreations.com/tuto/...CSS3 Shadows - Alsacreations
www.alsacreations.com/tuto/...Comment ajouter l'ombre aux éléments HTML en CSS - WayToLearnX
waytolearnx.com/2019/07/com...Comment ajouter l'ombre sur un texte en CSS - WayToLearnX
waytolearnx.com/2019/07/com...Les ombres - HTML 5 & CSS 3
yard.onl/sitelycee/cours/ht...L'effet ombre tableau HTML est un style de présentation très visuel qui permet à un tableau HTML d'avoir un look moderne et soigné. L'effet consiste à donner des ombres portées à des éléments de tableau qui sont insérés à l'intérieur d'une cellule. Les ombres peuvent être ajoutées à la bordure et à l'arrière-plan du tableau. Cela ajoute une subtilité visuelle et de la dimension à l'interface utilisateur.
Cet effet de tableau peut être utilisé pour mettre en évidence des éléments dans un tableau, ce qui le rend plus facile à lire. C'est une technique très utile pour les sites qui doivent afficher des données complexes. Les ombres peuvent également ajouter un aspect visuel moderne et attrayant à un tableau, ce qui le rend plus intéressant à regarder et plus facile à naviguer.
Cet effet est facile à implémenter et peut être réalisé avec une simple déclaration de style CSS. Les ombres sont appliquées à la bordure et à l'arrière-plan du tableau, ce qui permet d'obtenir un effet uniforme et cohérent. En outre, en utilisant des images et des couleurs, vous pouvez créer des effets plus complexes, ce qui permet aux développeurs et designers Web de créer des pages Web plus intéressantes et attrayantes.
J'ai personnellement utilisé cet effet dans plusieurs de mes projets Web. Je trouve que c'est une excellente façon d'ajouter une touche visuelle à des tableaux complexes et variés. Les ombres portées aident à donner à ces tableaux une allure plus professionnelle et attrayante, ce qui ajoute une ...