Comment créer un espace entre deux lignes dans un tableau en CSS ?
On peut créer un espace entre deux lignes d'un tableau, soit en utilisant des propriétés CSS pour une ligne, soit en créant une ligne vide.
Il est possible avec les feuilles de style CSS de changer la façon dont est affiché un tableau HTML. On peut ainsi créer de l'espace entre deux lignes du tableau, soit en utilisant des propriétés CSS pour une ligne, soit en créant une ligne vide.
La propriété border-spacing permet de définir une distance entre deux lignes pour un tableau entier. Elle ne fonctionne que pour un tableau dont les bordures des cellules sont séparées. Pour définir ceci, il faut ajouter la propriété border-collapse avec comme valeur separate. Ces propriétés s'appliquent au tableau entier.
<!-- HTML --> <table class=lignesEspacees> <tr>td>Mon texte</td></tr> </table> /* CSS */ .lignesEspacees { border-collapse : separate; border-spacing : 10px; }
Si vous souhaitez faire une séparation qu'entre deux lignes précises d'un tableau, vous pouvez utiliser la propriété padding. Cette propriété s'applique à n'importe quel élément et définit une marge qui se situe entre le contenu et les bordures de l'élément. La propriété padding-bottom ajoute une marge en bas du contenu alors que la propriété border-top crée une marge en haut.
<!-- HTML -->
<table>
<tr class=margeEnBas><td>Mon texte</td></tr>
<tr class=margeEnHaut><td>Mon texte</td></tr>
</table>
/* CSS */
.margeEnBas
{
padding-bottom : 5px;
}
.margeEnHaut
{
padding-top : 5 px;
}
Il est également possible de faire une séparation avec une ligne vide. Pour cela, vous devez tout de même écrire la balise de colonne car sinon certains navigateurs ne la prendront pas en compte. Pour que votre ligne vide ait une hauteur, il suffit de renseigner la propriété height avec la valeur de votre choix.
<!-- HTML -->
<tr class=espace><td></td></tr>
/* CSS */
.espace
{
height : 10px;
}