Faire un faux tableau en CSS : les différentes techniques
L'utilisation des tableaux pour mettre en forme une page web est considérée comme obsolète. Aujourd'hui, il est préférable d'utiliser des éléments HTML sémantiques et des propriétés CSS pour structurer et styliser son contenu. Cependant, il peut parfois être utile de recourir à des techniques de faux tableaux en CSS pour simuler l'apparence d'un tableau sans utiliser la balise table
. Voici quelques techniques pour y parvenir.
Utiliser la propriété display avec les éléments HTML
La propriété display
permet de déterminer le type d'affichage d'un élément HTML. On peut l'utiliser pour simuler l'apparence d'un tableau en associant des propriétés CSS spécifiques à chaque élément. Ainsi, pour créer une ligne de tableau, on peut utiliser un élément div
avec la propriété display
réglée sur inline-block
. Pour créer une colonne, on peut utiliser un élément ul
(liste non-ordonnée) avec la propriété display
réglée sur inline-block
. Pour créer des cellules de tableau, on peut utiliser des éléments span
.
div.row {
display: block;
}
div.cell {
display: inline-block;
}
ul.column {
display: inline-block;
list-style: none;
padding: 0;
}
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
</div>
<ul class="column">
<li>Row 1</li>
<li>Row 2</li>
<li>Row 3</li>
</ul>
Utiliser la propriété float avec les éléments HTML
La propriété float
permet de faire flotter un élément à gauche ou à droite d'un bloc. On peut l'utiliser pour créer des tableaux en associant des propriétés CSS à chaque élément. Ainsi, pour créer une ligne de tableau, on peut utiliser un élément div
avec la propriété float
réglée sur left
. Pour créer une colonne, on peut utiliser un élément ul
avec la propriété float
réglée sur left
. Pour créer des cellules de tableau, on peut utiliser des éléments span
.
div.row {
clear: both;
}
div.cell {
float: left;
width: 100px;
}
ul.column {
float: left;
list-style: none;
padding: 0;
}
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
</div>
<ul class="column">
<li>Row 1</li>
<li>Row 2</li>
<li>Row 3</li>
</ul>
Utiliser la propriété grid pour créer un tableau
La propriété grid
permet de créer des grilles à plusieurs colonnes et lignes. On peut l'utiliser pour simuler un tableau en créant des zones avec un nombre de colonnes et de lignes précis. On peut ensuite y placer des éléments pour créer des cellules de tableau.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.cell {
border: 1px solid black;
text-align: center;
}
<div class="grid-container">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
</div>
Utiliser les faux éléments
Il est possible d'utiliser les faux éléments before
et after
pour créer des colonnes et des lignes. On peut ainsi créer une ligne de tableau en utilisant un élément parent avec la propriété position:relative
et un élément enfant créé avec before
pour simuler la ligne. De même, on peut créer une colonne en utilisant un élément parent avec la propriété display:flex
et un élément enfant créé avec before
pour simuler la colonne.
.table {
position: relative;
border-collapse: collapse;
}
.row {
position: relative;
height: 30px;
background-color: #ccc;
}
.row:before {
content: "";
position: absolute;
top: 5px;
bottom: 5px;
left: 0;
right: 0;
border-bottom: 1px solid black;
}
.column {
display: flex;
flex-direction: column;
}
.column:before {
content: "";
flex-grow: 1;
border-right: 1px solid black;
}
<div class="table">
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
</div>
<div class="row">
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
<div class="cell">Cell 6</div>
</div>
<div class="column">
<div class="cell">Cell 1</div>
<div class="cell">Cell 4</div>
</div>
<div class="column">
<div class="cell">Cell 2</div>
<div class="cell">Cell 5</div>
</div>
<div class="column">
<div class="cell">Cell 3</div>
<div class="cell">Cell 6</div>
</div>
</div>
En conclusion, il existe plusieurs techniques pour créer des faux tableaux en CSS. Cependant, il est important de garder à l'esprit que ces techniques peuvent avoir des limites en termes d'accessibilité, de référencement et de maintenabilité du code. Il est donc recommandé d'utiliser ces techniques avec précaution et de privilégier l'utilisation des éléments HTML sémantiques chaque fois que cela est possible.
Faire des tableaux en CSS
www.css-faciles.com/tableau...Cacher une ligne dans un tableau - OpenClassrooms
openclassrooms.com/forum/su...CSS3 Grid Layout - Alsacreations
www.alsacreations.com/artic...XHTML, CSS, accessibilité : confusions et amalgames - Alsacreations
www.alsacreations.com/artic...Vrai-faux tableau à onglet - Le forum des forums actifs
forum.forumactif.com/t35429...remplacement de tableaux par CSS - (X)HTML et CSS - Webmaster ...
www.webmaster-hub.com/topic...Perspectives de mise en page CSS avec des tables - Clever Age
blog.clever-age.com/fr/2008...Le langage CSS/Fonds, bordures, marges et espacements - Wikilivres
fr.wikibooks.org/wiki/Le_la...Réaliser un faux tableau CSS peut être une tâche assez complexe si vous ne savez pas comment le faire correctement. Bien que l'utilisation de tableaux pour le codage HTML et la mise en page web soit une pratique archaïque, c'est encore l'une des solutions les plus courantes pour mettre en forme des données tabulaires. En utilisant des classes CSS et des feuilles de style, vous pouvez facilement créer une table qui s'adapte non seulement à votre contenu, mais aussi à votre site Web.
Un faux tableau CSS commence par l'utilisation de balises div, qui sont les bases de toute page HTML. Une fois que la structure de base de la page est en place, vous pouvez créer les cellules et les colonnes qui sont nécessaires pour votre tableau. Une fois que ces balises div sont en place, vous pouvez alors commencer à appliquer des styles CSS à chaque ligne et colonne, pour afficher les données de manière attractive et cohérente.
Pour ajouter plus de style à votre faux tableau, vous pouvez appliquer un fond à chaque ligne et chaque colonne, en utilisant des couleurs, des images et des bordures. Vous pouvez également modifier le format des chiffres et des polices, ainsi que l'alignement des colonnes, pour que toutes les données dans le tableau aient l'air professionnel.
Pour créer un faux tableau CSS, il est important de prendre le temps de bien le peaufiner et de le rendre aussi attrayant que possible. Bien que ce puisse être un peu difficile au début, prendre le temps de bien le réaliser est important pour assurer une mise en page cohérente et professionnelle.
J'ai ré ...