Changer le fond des cellules d'un tableau au survol de la souris - 2ème partie

Dans ce cas n°2, plus compliqué, nous aborderons le tableau dont chaque cellule a une couleur différente "au repos" et une couleur différente au survol de la souris

A lire : Cas n°1

PREMIERE PARTIE :

Vous collez en html le pavé suivant

<style type="text/css">
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
a.B {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
a.B:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }
</style>

Sachant que

a.A et a.A:hover concernent la 1ère cellule (nommée A)
a.B et a.B:hover concernent la 2ème cellule (nommée B)

Vous personnalisez ainsi le lien normal :

a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ;
color: #3c4157;  }
a.B {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }

border: 1px solid #3c4157 : la bordure
background-color: #d8e2ec : le fond
color: #3c4157: la couleur de la police

le lien au survol de la souris :

a.A:hover {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
a.B:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }

Modifiez selon le même schéma que pour le lien normal.

Le padding représente les marges intérieures, afin que l'encadrement ne soit pas collé au lien.

DEUXIEME PARTIE :

Vous collez en html, à la suite, le pavé suivant qui représente le tableau

<table cellspacing="0" cellpadding="0" align="center" border="0">
 <tbody>
  <tr>
   <td>
   <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien 1</a></p>
   </td>
   <td>
      <p style="line-height: 30px" align="center"><a class="B" href="adresse du lien ">Lien 2</a></p>
   </td>
 </tbody>
</table>

A personnaliser ainsi

<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien
1</a></p>

devient par exemple

  <p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html">Toute la Déco</a></p>

Si vous souhaitez que le lien s'ouvre dans une nouvelle fenêtre, vous rajoutez target="_blank", ce qui donne par exemple

  <p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html" target="_blank" >Toute la Déco</a></p>

Si vous avez besoin d'une cellule supplémentaire, vous rajoutez dans le 1er pavé :

a.C {padding: 6px;border: 1px solid #d8e2ec ;  background-color: #3c4157; color: #d8e2ec ;  }
a.C:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157;  }

et dans le second pavé :

<td>
    <p style="line-height: 30px" align="center"><a class="C" href="adresse du lien 3">Lien 3</a></p>
   </td>

après la ligne suivante :

<td>
    <p style="line-height: 30px" align="center"><a class="B" href="adresse du lien 2">Lien 4</a></p>
   </td>

et ainsi de suite.

Vous obtenez au final :

Top Liste

Plugboard