Comment puis-je utiliser CSS et jQuery pour créer des couleurs de lignes alternées dans des tableaux HTML ?

Utiliser CSS pour créer des couleurs de lignes de tableau alternatives

Les couleurs de lignes de tableau alternées améliorent l'attrait visuel et la convivialité des tableaux HTML, les rendant plus faciles à lire. Voici comment y parvenir en utilisant CSS :

• Utilisation de la classe Table :

Vous pouvez attribuer une classe à la table et appliquer des styles au lignes du tableau au sein de cette classe :

.alternate_color tr:nth-child(odd) {
  background-color: #CCCCCC;
}

Cela alternera la couleur d'arrière-plan des numéros impairs lignes.

• Utilisation de jQuery :

Avec jQuery, vous pouvez sélectionner et styliser les lignes impaires dynamiquement :

$(document).ready(function() {
  $("tr:odd").css("background-color", "#CCCCCC");
});

• ntième enfant :

Directement dans la feuille de style CSS, vous pouvez utiliser le sélecteur nième enfant pour cibler chaque autre ligne :

tbody tr:nth-child(odd) {
  background-color: #CCCCCC;
}

Cela garantit que seules les lignes impaires auront l'arrière-plan alternatif couleur.

• Exemple HTML :

Voici un exemple HTML utilisant les méthodes ci-dessus :

<table class="alternate_color">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>13</td>
    </tr>
  </tbody>
</table>

En appliquant la CSS approprié, vous pouvez facilement créer des rayures zébrées dans votre tableau, améliorant ainsi sa lisibilité et son esthétique.

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!