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