Magazine

Mise en page des tableaux avec HTML et CSS

Publié le 23 septembre 2009 par Yann L'Hostis

Dans les fiches de description de nos articles dans Prestashop nous avons besoin de tableaux avec certaines caractéristiques.

Les modèles des tableaux que nous voulon utiliser existent déjà dans un blog qui présente notre gamme. Exemple avec cette page sur notre drisse de comptétition.

Comme notre site est fait avec WordPress, la mise en page des tableaux est réalisée avec le plugin “WP-table reloaded”

Ce plugin ajoute un fichier CSS à WordPress. Ce fichier CSS est accessible dans l’onglet “options du plugin” (chemin complet : admin WordPress > Outils > WP-table reloaded > options du plugin).

Pour pouvoir utiliser la mise en forme des tableaux de WordPress il faut :

  1. Copier le fichier CSS des tableaux de WordPress (voir chemin ci dessus) dans le fichier CSS de Prestashop (fichier global.css dans le répertoire CSS de votre thème Prestashop).
  2. Afficher le code source de la page WordPress comprenant le tableau initial
  3. Copier la partie du code entre <table> et </table> dans l’affichage du code source
  4. Coller dans l’écran HTML (accessible par le bouton html de l’interface d’écriture des description de prestashop)
  5. Sauvegarder et se réjouir du résultat.

Critique de cette méthode :

  1. Très lourd. C’est un rouleau compresseur pour écraser une mouche.
  2. Si les valeurs du tableau change, ce sont à la fois le blog WordPress et le site Prestashop qui sont à mettre à jour avec cette procédure très très lourde.
  3. Globalement, je ne recommande pas cette méthode de bourrin.

Autres pistes à développer.

  1. Faire des copier / coller depuis Excel. Pas propre du tout mais plus facile.
  2. Inclure des images des tableaux : lourd à mettre en place et pas souple. Permet un partage entre plusieurs site des mêmes tableaux.
  3. Faire des “include” de codes html des tableaux. Je ne sais pas si c’est envisageable et comment.

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • PSN = mise à jour

    A tous les pro S comme on les appelle, voici la mise à jour du PSN, Notons par exemple l'apparition des deux packs gratuits pour Naruto : Ultimate Ninja Storm o... Lire la suite

    Par  Andersen620
    HIGH TECH, JEUX VIDÉO
  • Mise à jour Fring

    Mise jour Fring

    Nouvelle mise à jour Fring La version 1.1.0.9. nous propose une amélioration graphique, un nouveau dialer/clavier plus facile à utiliser, grâce à l’ajout d’un... Lire la suite

    Par  Dualcore
    HIGH TECH, MOBILES
  • Conseils pour améliorer le design d'une newsletter HTML

    Comme la plupart des webdesigners, vous comprenez la nécessité de créer des sites web accessibles, modernes et sémantiquement bien structurés, le tout à l'aide... Lire la suite

    Par  Christophe Da Silva
    EMARKETING, FOCUS EMPLOI, INTERNET, MARKETING & PUBLICITÉ
  • Grille CSS pour un design simple et rapide

    Grille pour design simple rapide

    Pour accélérer vos mises en page CSS, il est conseillé d'utiliser des mises en page à base de grilles. Mais comment cela fonctionne t-il et comment le mettre... Lire la suite

    Par  Dictege
    INTERNET, PROGRAMMATION
  • Coder votre propre selecteur CSS avec jQuery

    Avec jQuery nous pouvons sélectionner un ou plusieurs éléments grâce à des sélecteurs CSS comme par exemple : $("monselecteur:first") Je vais vous montrer... Lire la suite

    Par  Dator
    INTERNET, PROGRAMMATION
  • Disparition du css 'global'

    Disparition 'global'

    av09 Pour le staff : Comme convenu, suivant le bug survenu lors de votre dernière maintenance, le joujou rouge attend votre script sans toucher à rien. Lire la suite

    Par  Triol
    PHOTOS, TALENTS
  • CSS : le mensonge tactique

    On apprend aujourd’hui que grâce à une gestion calamiteuse mais aussi de façon pas très subtile, le groupe d’assurances CSS a réussi (une performance …) à... Lire la suite

    Par  Kalvin Whiteoak
    POLITIQUE, SOCIÉTÉ

A propos de l’auteur


Yann L'Hostis 58 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog