colorer une ligne sur deux en HTML
On a plusieurs solutions:
- en PHP... Ce n'est pas la solution la plus pratique, donc, on oublie...
- en CSS, avec les pseudo-classes CSS3 nt-child, exemple pratique:
table tbody tr:nth-child(odd) { background-color: #d7d7d7; }
Ce code peut être intégré à notre page HTML juste avant TABLE comme ceci:
<style type=text/css> table tbody tr:nth-child(odd) { background-color: #d7d7d7; } </style> <table> <thead>.... en-tête de table...</thead> <tbody> <tr>.....</tr> <tr>.....</tr> ..... </tbody> </table>
Une ligne sur deux des éléments TR inclus dans TBODY lui-même inclus
dans table seront colorées en fond gris clair.
Seul hic, ça ne marche pas avec Internet Explorer (quelle €$@H{° ce IE....) (injure en stroumpfo-slovaque) pour les versions de IE inférieures à IE9.
Qu'à celà ne tienne... Si vous avez l'indicible bonheur d'exploiter JQUery, il y a quand même
une solution alternative. Il suffit, à la fin de </table> de rajouter juste ces
lignes de code:
<script> $("tr:odd").css("background", "#ededed"); </script>
Et là, Internet Explorer va obtempérer... M'enfin!