Informatique


Exercices sur les tableaux

La mise en page des tableaux n'est pas toujours facile en CSS. L'utilisateur a donc tendance a multiplier les classes pour obtenir les effets désirés, cela aboutit inévitablement a une gestion assez lourde tant du côté html que du côté CSS.
Avant de commencer, quelques petits conseils de base:
  • il faut éviter de créer des classes dans les <tr> et les<td>, la tentation est grande mais il faut résister
  • on fait une et une seule classe au niveau du <table> afin d'éviter d'alourdir inutilement le code HTML.

    Pour la balise <table>:

    • la largeur du tableau
    • la bordure externe du tableau, tailles, couleurs (attention border-radius n'a pas d'effet sur la bordure externe)
    • la couleur de fond du tableau
    • la couleur et taille des caractères du contenu du tableau
    • l'espace entre les cellules est un effet rarement désiré, on va le supprimer
    • Mettre le titre du tableau en forme
  • Les balises <tr> ne contiennent pas directement l'information, on agira à leur niveau essetiellement sur la couleur de fond
  • Pour les balises <td>:
    • une bordure autour des cellules
    • du padding afin d'éviter que le texte ne colle à la bordure
  • Réaliser le tableau suivant: (table_1_de_cs.htm)


  • Réaliser le tableau suivant: (table_2_de_cs.htm)


  • Réaliser le tableau suivant: (table_3_de_cs.htm)