Comment créer un super Tableau CSS dans votre Blog (Partie 1)

Dans ce tutoriel je vais vous expliquer le code HTML pour créer un tableau valide W3C, compatible avec tous les navigateurs, facilement personnalisable et que vous pouvez ajouter dans n’importe quelle partie de votre blog sous Blogger, Wordpress, CanalBlog ...
Tableau HTML CSS
Dans un deuxième article, qui sera publié demain, je vais donner le code HTML+CSS de 20 tableaux que vous pouvez copier-coller directement dans votre blog.

Le code HTML d’un tableau

Voici le code HTML d’un tableau basique avec 5 colonnes, 5 lignes et un titre
<table id="tableau" summary="Classement Blogspot par Wikio - Mai 2010">
  <thead>
    <tr>
      <th scope="col">Classement</th>
      <th scope="col">Blogspots</th>
      <th scope="col">Wikio</th>
      <th scope="col">Catégorie</th>
      <th scope="col">Classement</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">Classement Blogspot par Wikio - Mai 2010</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>Partageons mon Avis</td>
      <td>1</td>
      <td>Politique</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>De tout et de rien</td>
      <td>5</td>
      <td>Divers</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>La Maison du Faucon</td>
      <td>6</td>
      <td>Divers</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Sarko France</td>
      <td>7</td>
      <td>Politique</td>
      <td>2</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Le coucou de Claviers</td>
      <td>11</td>
      <td>Politique</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Le Tableau sans le CSS

En ajoutant le code HTML tel quel sans aucune propriété CSS pour contrôler le design du tableau, on obtient le résultat suivant :
Classement Blogspots Wikio Catégorie Classement
Classement Blogspot par Wikio - Mai 2010
1 Partageons mon Avis 1 Politique 1
2 De tout et de rien 5 Divers 2
3 La Maison du Faucon 6 Divers 3
4 Sarko France 7 Politique 2
5 Le coucou de Claviers 11 Politique 3

Le Tableau avec un petit code CSS

J’ai spécifié la couleur de la première ligne, des autres colonnes et ajouté un effet hover, voici le code CSS :
#tableau {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 10px 0;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}
#tableau th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2gjh1nPI/AAAAAAAACbg/7lNsVpks2oY/s1600/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;
}
#tableau td {
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid #fff;
    background: #e8edff url('http://1.bp.blogspot.com/_xDpoN6UfFFY/S-J2f5yBC3I/AAAAAAAACbY/zWXYXsR-w5E/s1600/gradback.png') repeat-x;
}
#tableau tfoot tr td {
    background: #e8edff;
    font-size: 16px;
    color: #99c;
    text-align:center;
}
#tableau tbody tr:hover td {
    background: #d0dafd url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2hsztUzI/AAAAAAAACbo/ztV1CK0RUrE/s1600/gradhover.png') repeat-x;
    color: #339;
}
#tableau a:hover {
    text-decoration:underline;
}
et le résultat:  
Classement Blogspots Wikio Catégorie Classement
Classement Blogspot par Wikio - Mai 2010
1 Partageons mon Avis 1 Politique 1
2 De tout et de rien 5 Divers 2
3 La Maison du Faucon 6 Divers 3
4 Sarko France 7 Politique 2
5 Le coucou de Claviers 11 Politique 3

Explication du code HTML

Je vais essayer d’expliquer le code HTML et comment le personnaliser sous forme d'une FAQ (Foire Aux Questions) si vous ne trouvez pas la réponse à vos questions n'hésitez pas à laisser un commentaire en bas de la page.

Indexe

  1. thead ?
  2. tbody ?
  3. tfoot
  4. summary ?
  5. Comment ajouter-supprimer une colonne - th ?
  6. Comment ajouter-supprimer une ligne - td?
  7. Comment ajouter un titre au tableau - tfoot ?
  8. Comment changer la taille du titre du tableau - colspan?
  9. Comment contrôler le design du tableau avec du CSS ?

Foire Aux Questions

  • Comment ajouter-supprimer une colonne - th ?
Pour ajouter une colonne repérer le code entre thead et /thead :
  <thead>
    <tr>
      <th scope="col">Classement</th>
    </tr>
  </thead>
Multipliez la ligne <th scope="col">Classement</th> autant de fois que vous voulez de colonnes en ne modifiant que le texte Classement.
  • Comment ajouter-supprimer une ligne - td ?
Repérez le code :
  <tbody>
Pour créer un ligne de plus dans le tableau, ajoutez ce code juste en dessous de <tbody> :
    <tr>
      <td>1</td>
      <td>Partageons mon Avis</td>
      <td>1</td>
      <td>Politique</td>
      <td>1</td>
    </tr>
Répétez <td>Partageons mon Avis</td> autant de fois que vous voulez avoir de colonnes dans cette ligne.
  • Comment ajouter un titre au tableau - tfoot ?
Repérez ce code :
  <tfoot>
    <tr>
      <td colspan="5">Classement Blogspot par Wikio - Mai 2010</td>
    </tr>
  </tfoot>
Modifiez le texte en bleu, c'est le titre de votre tableau.
  • Comment changer la taille du titre du tableau - colspan?
La largeur du titre est calculée automatiquement, elle est égale au nombre de colonnes.
Donc si vous ajoutez ou retirez des colonnes, indiquez le dans le code du tableau en modifiant la valeur 5 dans colspan="5".
  <tfoot>
    <tr>
      <td colspan="5">Classement Blogspot par Wikio - Mai 2010</td>
    </tr>
  </tfoot>
  • summary ?
Un petit résmué du contenu du tableau qui sera uniquement visible par les moteurs de recherches et les robots.
  • thead ?

C'est l'entête du tableau, la première ligne.
  • tbody ?
Ici vous entrez le code du corps du tableau, c'est à dire les différentes lignes sauf l'êntête et le titre.
  • tfoot ?
Dans cette partie vous allez renseigner un titre qui sera affiché en bas du tableau. 

  • Comment contrôler le design du tableau avec du CSS ?
Il y a deux méthode pour ajouter le code CSS :
   - Soit vous allez le copier dans le corps du message dans une balise STYLE :
<style>
code CSS blablabla ......
</style>
   - Sinon vous pouvez l'ajouter dans le code HTML de votre blog, pour cela allez dans "Mise en page", "Modifier le code HTML" et recherchez ce texte :  ]]></b:skin> et juste au dessus ajoutez le code CSS du Tableau.

Sources + Inspirations : le généralissime Smashing Magazine.
Libellés : , Publié le dimanche, mai 09, 2010
20 Commentaires
  1. Merci! Je conserve ces informations précieusement. Lorsque je dois insérer un tableau,j'utilise Komposer mais il y a toujours des espaces inexpliqués que je ne peux supprimer. La prochaine fois que j'aurai besoin de créer un tableau, je suivrai tes conseils.

    RépondreSupprimer
  2. @Lise
    Pour les espaces, il faut copier le code HTML dans la partie "Modifier le code HTML" et non "Rédiger"

    RépondreSupprimer
  3. Encore très précieux comme conseils, merci Soufiane.

    Je tenterais de faire un tableau dans mon blog, par exemple en notant les films que j'ai récemment vu et en faisant mon classement!

    RépondreSupprimer
  4. Un gros bravo pour toi! Tu as fais un article que je classerais dans les complets à l'extrême et de plus très utile! :D

    RépondreSupprimer
  5. merci encore une fois c bien expliqué et intéressant

    RépondreSupprimer
  6. Merci tout le monde
    Finalement je vais publier l'autre article un peu plus tard ...

    RépondreSupprimer
  7. Merci Soufiane, mais une fois le code copié ou le tableau se positionne t'il sur le blog car je ne vois rien ...

    Au fait soufiane as-tu une bannière pour que je mettes cela sur mon blog, j'ai beau cherché je trouves rien, merci ;)

    RépondreSupprimer
  8. Merci pour les explications.
    Voici un moyen pour copier facilement un tableau Excel dans votre blog: http://geekastuces.blogspot.com/2010/03/tableizer-copier-coller-un-tableau.html

    RépondreSupprimer
  9. Félicitations pour ce blog si riche en informations et formation très utiles.
    Bon courage :)

    RépondreSupprimer
  10. Travaillant sur Wordpress, c'est exactement ce qu'il me manquait pour mes articles.
    Avec photos et textes.
    Un GRAND MERCI

    Le Glaude

    RépondreSupprimer
  11. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  12. Bonjour Soufiane et merci pour tes tuyaux.

    "Dans un deuxième article, qui sera publié demain"...je n'arrive pas à trouver la 2ème partie dans ton blog.

    Merci

    RépondreSupprimer
  13. @frenchbfexplorer
    Dsl pour diverses raisons, j'ai toujours pas publié le dit article o__O

    RépondreSupprimer
  14. merci sofiane, mais comment je peut récupérer les images utiliser dans le css ??

    RépondreSupprimer
  15. Salut
    Bravo pour cet excellent travail
    mais je voudrais savoir s'il est possible de générer ce tableau dynamiquement à partir d'une base de données...
    Merci de me répondre

    RépondreSupprimer
  16. Billet sans aucun intérêt. Rien de nouveau sous le soleil puisque tous "les précieux conseils" sont disponibles sur le web depuis la création du css... Extrêmement déçu par le titre, m'imaginant trouver la fonctionnalité de ouf que je cherchais. Espérons que la partie 2 soit quelque plus avancée.

    RépondreSupprimer
  17. Excellent, merci Sofiane, il y a des tableau partout sur le net encore faut t'il les trouver, celui-ci fonctionne parfaitement sur blogger et les explications sont claire.

    RépondreSupprimer
  18. Salam,

    1/url('http://1.bp.blogspot.com/_xDpoN6UfFFY/S-J2f5yBC3I/AAAAAAAACbY/zWXYXsR-w5E/s1600/gradback.png')

    2/url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2hsztUzI/AAAAAAAACbo/ztV1CK0RUrE/s1600/gradhover.png')

    C'est quoi ces paramètres-images ? Que dois-je faire pour les personnaliser ?

    Merci. Kamel

    RépondreSupprimer
  19. Bonjour Soufiane,

    Tu es ma Bible pour mon blog..enfin je veux dire mon Coran.

    Plus sérieusement j'ai deux questions:

    1- Comment faire pour modifier le design de la première colonne en utilisant le css (je sais comment faire avec le code source en htnl mais je veux faire du travail propre).

    code CSS blablabla ......
    "
    C'est quoi blablaa th1 par exemple mais comment le placer dans le code html?

    2- Comment mettre une image de fond pour l'ensemble du tableau?

    Merci

    nb les autres peuvent aussi répondre si ils connaissent la réponse.

    RépondreSupprimer
  20. Salut,
    Nickel le tuto, je l'ai appliqué sur le css de D7 aucun soucis...

    Visible ici http://art-numeric.fr/node/3

    Maintenant y'a plus qu'à personnalisé les couleurs...

    RépondreSupprimer

Copyright 2015 Soufiane.fr