Comment ajouter un espace vertical entre les lignes d'un tableau en HTML ?

Séparation des espaces dans les tableaux HTML : un guide complet

En tant que développeurs Web, nous travaillons souvent avec des tableaux pour présenter les données de manière structurée. Cependant, des situations peuvent survenir dans lesquelles vous avez besoin d'une séparation verticale supplémentaire entre les lignes du tableau, au-delà de ce que proposent généralement les navigateurs. Cela peut-il être réalisé en utilisant CSS ?

CSS pour l'espacement des lignes de tableau

Une idée fausse courante est que la propriété CSS border-spacing peut être utilisée pour ajouter un espace vertical entre les tableaux. rangées. Bien qu'il ajuste l'espacement entre les cellules du tableau, il n'affecte pas la distance verticale entre les lignes.

Solution : un remplissage à la rescousse

Pour créer un espace entre les lignes du tableau , la clé réside dans l'application d'un remplissage aux cellules individuelles du tableau (). Considérez le code CSS suivant :

tr.spaceUnder>td {
  padding-bottom: 1em;
}

Les éléments td dans les lignes tr portant la classe spaceUnder recevront un remplissage inférieur de 1em, écartant efficacement les lignes. Cela vous permet de créer un espacement vertical entre les lignes sélectionnées tout en conservant une structure de table propre et organisée.

Considérations supplémentaires

Notez que cette solution ne fonctionne que sur les enfants directs de tr éléments. Cela permet la création de tables imbriquées avec un espacement différent entre les sections, comme illustré dans le code ci-dessous :

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!