Un tableau dont les cellules changent au survol de la souris - Cas n°1

Dans ce cas n°1, nous aborderons le tableau dont toutes les cellules ont la même couleur "au repos" et la même couleur au survol de la souris

C'est moins difficile à réaliser qu'il n'y paraît.

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 ;  } 
</style>

Vous personnalisez ainsi :

le lien normal :

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

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 ;  } 

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="A" href="adresse du lien 2">Lien 2</a></p>
   <td>
      <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 3">Lien 3</a></p>
   </td>
   <td>
     <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 4">Lien 4</a></p>
   </td>
   <td>
    <p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 5">Lien 5</a></p>
   </td>
  </tr>
 </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 ligne supplémentaire, vous rajoutez à la suite de :

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

la ligne suivante :

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

et ainsi de suite.

Vous obtenez au final :

Top Liste

PlugBoard

Gadgetothèque

Toute la Déco

Contact