Vous le savez, il est relativement simple de donner des propriétés CSS aux tableaux. Vous pouvez par exemple définir facilement une couleur de fond différente pour une ligne sur deux. Seulement, aller ajouter la propriété à chacune des lignes voulues devient vite fastidieux.

On va donc dans ce tuto s'appuyer sur Mootools (déjà présent dans vos pages) pour styliser un peu nos tableaux de manière simple.

Prenons le tableau ci-contre. Il est constitué de 5 lignes (dont 1 pour le titre) et de 2 colonnes.

Pour chacune des lignes, une classe a été attribuée mais de manière automatique à l'aide du framework javascript Mootools.

Ce code est à mettre dans un article ou une page simple si vous souhaitez qu'il n'affecte que les tableaux de la page en question ou alors, vous le placez dans un module simple html pour qu'il soit actif sur tous les tableaux de votre blog.

Le code javascript

Le code est le suivant: 

<script type="text/javascript">// <![CDATA[ if(typeof(onJSFilesLoaded) != "object") onJSFilesLoaded = []; onJSFilesLoaded.push(function(){ $$('.ulmodules table tr:even').setProperty('class', 'tab_pair'); $$('.ulmodules table tr:odd').setProperty('class', 'tab_impair'); $$('.ulmodules table tr th').setProperty('class', 'tab_titre'); }); // ]]></script>

Dans ce code, on se contente d'affecter une classe aux éléments des tableaux. Par exemple, à la ligne 06, pour toutes les lignes paires (tr:even) des tableaux (table) du contenu des articles (.ulmodules), on affecte la classe tab_pair

Le CSS

Il ne reste plus qu'à définir le CSS dans Modifier le thème / Ajouter du CSS comme ci-dessous:

.tab_pair { color:black; background-color:lightyellow; } .tab_impair { color:black; background-color:lightgreen; } .tab_titre { color:white; background-color:green; font-size:1.2em; }