Un tableau dont les cellules changent au survol de la souris - cas n°2

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 mode source 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>

Vous personnalisez ainsi :
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)

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.

A voir si besoin : 
les codes couleur
les bordures - généralités

DEUXIEME PARTIE :

Vous collez en mode source, à la suite, le pavé suivant

<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 2">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