Plusieurs styles de tableaux pour un site

Bonjour,

J'ai cherché une réponse dans le forum mais je n'ai pas trouvé c'est pourquoi je viens vous demander conseil.

Je dois réaliser un site internet dans lequel il y a plusieurs styles de tableaux différents.
Sur certains tableaux il y a des bordures blanches, sur d'autres des bordures seulement sur les entêtes, d'autres ont un padding différent avec le texte centré...
Ma question est de savoir comment optimiser au mieux les tableaux pour ne pas me retrouver avec des styles en vrac et que le code reste clair.

Faut il créer des classes génériques pour les border-bottom,les border-left, les alignements de texte et les appliquer directement aux cellules?
Ou alors créer une classe appliquée à un tableau "<table class="style1>" pour les différents styles de tableau sachant que certain styles sont redondants.

Merci d'avance pour votre aide


Maxime

Bonjour,

Je ne vois pas exactement ce que tu veux faire, mais la solution la plus économique en code serait de créer une classe pour tableau et ensuite de styler les éléments de celui-ci via cette classe :

.tableau1 td {
background-color: #ddd;
text-align: center;
padding: 0 2px;
border: 1px solid #ccc;
}

.tableau2 td {
background-color: #f00;
text-align: left;
padding: 0 5px;
border: 2px solid #000;
}

etc.

Bonne continuation.

Complètement d'accord avec Thierry !

Salut,

Merci pour ta réponse.
Je vais essayer d'être un peu plus clair en détaillant.

Il est possible qu'une couleur d'arrière plan ou un type de bordure revienne souvent dans plusieurs tableaux(tableau1, tableau2, mais pas tableau3)

Ma question est la suivante:
Ne serait-il pas plus judicieux de créer une classe générique pour une couleur (un peu comme on peut faire pour float ou clear) et appliquer la classe aux <td>, plutôt que de redéfinir des styles css comme tu as pu le faire?

Merci pour ton aide


Maxime

Bonjour,

le code donné est le seul qui convient quand les différents styles n'ont aucun rapport entre eux.
Mais si tu as des points communs, une démarche comme OOCSS peut être intéressante : voir la vidéo de Nicole Sullivan à Paris-Web dans le commentaire sur http://typographisme.net/post/OOCSS
Tu pourras réutiliser des styles très facilement dans des tableaux aux styles pas identiques mais proches et factoriser les règles CSS. Par factoriser, j'entend :

.alternate, .maths {
    /* à 90% les mêmes instructions */
}
.maths th {
    text-align: center; /* sauf les cellules d'entêtes qui sont centrées dans un cas, par exemple */
}

Par contre évite de rajouter des classes sur td si tu peux les mettre sur tr et sur tr si tu peux les mettre sur table, ça en fera autant de moins
Tu peux par exemple cibler les th dans thead (1ères lignes) et dans tbody (colonnes à gauche) de 2 tableaux différents avec :

.une-classe-sur-table thead th {}
versus
.une-classe-sur-table tbody th {}

Cibler la 1ère cellule de données vs. les suivantes (pas sur IE6 mais même IE7 OK) :

.une-classe-sur-tr td
versus
.une-classe-sur-tr td + td
et même
.une-classe-sur-tr th + td /* la 1ère cellule de donnée qui suit une cellule d'entête. Ne ciblera pas un td dans les tableaux à entrée verticale ; qui n'aurait pas de th avant dans le code HTML mais que dans thead */

Modifié par Felipe (18 Aug 2012 - 15:21)