csv2table ~ saisie rapide de tableaux

Un moyen rapide de saisir des fonnées tabulaires.

➠ csv2table : Conversion d'un contenu au format CSV en table

Cliquer pour lire la documentation

1/ le contenu est lu dans un fichier
{up csv2table=emplacement-fichier}
2/ le contenu est saisi entre les shortcodes
{up csv2table}
article 1;5€
"article 2";25€
{/up csv2table}
author LOMART version 1.0 license GNU/GPLv3
  • csv2table: URL ou chemin et nom d'un fichier local
  • separator = ;: separateur des colonnes
  • HTML = 0: 0= aucun traitement, 1=affiche le code, ou liste des tags a garder (strip_tags)
  • model: nom de la classe modele dans le fichier csv2table.css
  • class: classe(s) pour la table
  • style: style inline pour la table
  • col: alignement et largeur des colonnes sous la forme x-D-C5-100 pour rien-droite-centre 5%-100% (voir doc)
  • col-style-*: style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
  • color-contrast: couleur des lignes impaires. la couleur des lignes paires est à définir dans class ou style
  • header = 0: 0: pas de titre, 1: premiere ligne contenu, titre colonne
  • header-class: classe(s) pour la balise thead
  • header-style: style pour la balise thead
  • footer = 0: 0: pas de pied, 1: derniere ligne contenu, pied colonne
  • footer-class: classe(s) pour la balise tfoot
  • footer-style: style pour la balise tfoot
  • base-css: règles CSS définies par le webmaster (ajout dans le head)

    Ayant besoin d'un moyen rapide et lisible de saisir des tableaux en HTML, j'ai créé cette action.

    Réf Description Prix
    123 un super produit 25.30€
    456 un autre; aussi bien 18.00€
    TOTAL 43.30€
    {up csv2table | model=green | header=1 | footer=1 | col=G10-90-D}
      Réf; Description;            Prix
      123; un super produit;       25.30€
      456; "un autre; aussi bien"; 18.00€
      [2]TOTAL;                    43.30€
    {/up csv2table}	
    

    Le tableau est généré à partir de ce shortcode. Vous remarquerez que les données du tableau sont présentées de manière à faciliter la relecture et les corrections. Chaque ligne du tableau doit être sur une seule ligne avec des points virgules pour séparer les colonnes. Si le texte d'une colonne contient le séparateur, il suffit de le mettre comme entre guillemets comme il est d'usage pour le format CSV. Il est possible de fusionner plusieurs cellules de la même ligne (colspan), mais pas de la même colonne (rowspan)

    Le shortcode qui encadre les données contient ces paramètres :

    • model green est une classe définie dans le fichier CSS de l'action
    • header et footer indique que la première et dernière ligne sont utilisées comme titre et pied de tableau
    • col permet d'indiquer rapidement les largeurs et justifications des colonnes. G10-90-D indique que la première colonne est justifiée à gauche avec une largeur de 10%, la deuxième à 90% et la dernière est alignée à droite

    Tous les paramètres

    Pour montrer toutes les possibilités, je vais présenter les paramètres des 3 actions csv2table, csv2list et csv2def dans un unique tableau.

    Rendez-vous à la fin du tableau pour le shortcode et les explications.

    Paramètre Tbl List Def Commentaires
    nom_action fic fic fic URL ou chemin et nom d'un fichier local
    id ID qui sera attribuée à la balise principale de l'action
    gestion des données
    separator ; ; ; séparateur des colonnes. Chaque action a ses spécificités, voir sa documentation.
    HTML pour contenu CSV: 0= aucun traitement, 1=affiche le code ou liste des tags conserves (strip_tags)
    O par défaut , sauf pour csv2list : b,a,span,strong,i,em,u,mark,small,img,code
    style général
    model nom de la classe modele dans le fichier CSS de l'action.
    class classe(s) pour la balise principale
    style style inline pour la balise principale
    base-css règles CSS définies par le webmaster (ajout dans le head). #ID est remplacé par l'ID réel
    gestion et style colonnes
    col alignement et largeur des colonnes sous la forme x-D-C5-100 (voir doc)
    col-style-* style inline pour tous les blocs colonnes. sinon voir style-1 à style-6
    gestion et style entête
    header 0 par défaut: pas de titre, 1: premiere ligne du contenu, les titres des colonnes au format CSV
    header-class classe(s) pour la balise thead
    header-style style pour la balise thead
    header-style-* style inline pour les entetes. sinon voir style-1 à style-6
    gestion et style pied
    footer 0 par défaut: pas de pied, 1: derniere ligne du contenu, le texte pour la dernière au format CSV
    footer-class classe(s) pour la balise tfoot
    footer-style style pour la balise tfoot
    footer-style-* style inline pour tous les pieds de colonnes. sinon voir style-1 à style-6
    spécifique csv2table
    color-contrast couleur des lignes impaires. la couleur des lignes paires est à définir dans class ou style
    spécifique csv2list
    leaders points de conduite, 0 par defaut
    leaders-color couleur des points de conduite
    list-style code hexadecimal et couleur du caractère (bb,red ou 26BD,#F00)
    bgcolor couleur de fond. #FFF par défaut
    header-bgcolor couleur de fond du titre
    footer-bgcolor couleur de fond de la dernière ligne
    spécifique csv2def
    flex-vgap espace vertical (px) entre les blocs dt/dd
    flex-hgap espace horizontal (px) entre les blocs dt et dd
    flex-term-width largeur en pourcentage de la colonne des termes
    term-class classe(s) pour le bloc des termes
    term-style style pour le bloc des termes
    term-style-separator style pour separer les differents termes
    def-class classe(s) pour le bloc des definitions
    def-style style pour le bloc des definitions
    def-style-separator style pour separer les differentes definitions

    Le code, avec seulement les premières lignes de données

    {up table-par-lignes}
    {up csv2table | model= blue
    | header=Paramètre;Tbl;List;Def;[t-jaune tl]Commentaires 
    | col=d-c-c-c-100
    | col-style-1=font-weight:bold;white-space:nowrap
    | base-css=#id.restables-clone tr td:nth-child(2)[text-align:left]td.st[background:yellowGreen;text-align:left !important]}
    nom_action;     fic;  fic;  fic;   <strong>URL ou chemin et nom d'un fichier local</strong>
    id;             [oui];[oui];[oui]; ID qui sera attribuée à la balise principale de l'action
    [5st]gestion des données
    separator;      "[b];";"[b];";"[b];"; séparateur des colonnes. Chaque action a ses spécificités. <mark>Voir sa documentation</mark>.
    ...
    

    les explications promises
    en utilisant bien sûr l'action csv2table avec le "model=line"

    ligne paramètre explication
    1 up table-par-lignes on utilise une autre action de UP pour rendre le tableau responsive.
    A partir de la version 1.6, UP analyse les shortcodes en commençant par les plus inclus. Cela permet, dans ce cas, de créer le code pour la table avec le shortcode enfant 'csv2table' puis de le transmettre au shortcode parent 'table-par-ligne' afin qu'il adapte ce code.
    2 model l'appel de l'action avec le model de rendu bleu
    3 header la première ligne ne contenant pas le titre, nous les spécifions directement dans le shortcode. [t-jaune tl] est le nom des classes standards de UP pour afficher le texte de la cellule en jaune et à gauche
    4 col permet de définir la largeur et/ou la justification des colonnes. G ou L pour left, D ou R pour right, C pour center suivi de la largeur en pourcentage. Les infos pour chaque colonne sont séparées par un tiret. Pour ne pas spécifier de règle pour une colonne, il suffit de ne rien mettre ou mettre une valeur nulle. Exemple : x--0-c centre la 4ème colonne, les 3 précedentes étant non reconnues. Pour une question de relecture, je préfère la forme x-x-x-C
    5 col-style-1 contient des règles CSS pour la 1ère colonne. ici, nous voulons le nom des paramètres en gras et sans retour à la ligne
    6 base-css permet d'écrire un style directement dans le head de la page. Cette possibilité nous permet de corriger un effet non désiré lors du passage en responsive par table-par-lignes. Sur grand écran, le paramètre col centre la 2ème colonne, mais sur petit écran, c'est toutes les données qui sont dans cette colonne. #id.restables-clone tr td:nth-child(2)[text-align:left] y remédie en forçant une justification à gauche lors de la vue responsive (.restables-clone). #id sera remplacé par l'ID réel de l'instance de l'action afin de limiter la portée de cette règle. L'autre règle définit la classe 'st' qui sera utilisée ligne 9
    7 une ligne de donnée simple. Notez la possibilité de mettre des balises HTML. Voir le paramètre HTML pour savoir comment gérer cette possibilité
    8 si les données d'une colonne commencent par des crochets [], on considère qu'il s'agit des noms des classes pour la cellule. Sur cette ligne, [oui] est une classe CSS définie dans la feuille de style de l'action qui affiche la coche verte au milieu de la cellule : td.oui {background:url(img/oui.png) no-repeat center 8px}.
    9 si le tag [..] commence par 2,3,4,5,6 , on considère que c'est le nombre de cellules sur lesquelles s'étend la cellule (colspan en HTML). [ 5 st] permet d'afficher un sous-titre en lieu et place des 5 colonnes avec les propriétés CSS définies pour la classe st (voir ligne 6 du shortcode).
    10 nous devons indiquer que le séparateur est un point-virgule; Pour éviter qu'il soit pris pour une nouvelle colonne, nous le mettons entre guillemets. [b] permet l'afficher en gras pour plus de visibilité.
    11 et la suite sans oublier les shortcodes fermants

    Origine et mise en forme des données

    Pour les exemples précédents, nous avons saisi le contenu entre les shortcodes. Il est possible d'indiquer le chemin et le nom d'un fichier comme argument de l'action

    Le shortcode :

    {up csv2table=https://lomart.fr/images/demo/android-version.csv 
    | model=green | style=width:auto 
    | header= version Android; nom de code }

    Le fichier brut :

    2.3.3 – 2.3.7; Gingerbread
    4.0.3 – 4.0.4; Ice Cream Sandwich 
    4.1.x, 4.2.x et 4.3;Jelly Bean
    4.4;KitKat
    5.0 et 5.1;Lollipop
    6.0;Marshmallow
    7.0 et 7.1;Nougat
    8.0 et 8.1;Oreo
    9;Pie

    Le résultat :

    version Android nom de code
    2.3.3 – 2.3.7 Gingerbread
    4.0.3 – 4.0.4 Ice Cream Sandwich
    4.1.x, 4.2.x et 4.3 Jelly Bean
    4.4 KitKat
    5.0 et 5.1 Lollipop
    6.0 Marshmallow
    7.0 et 7.1 Nougat
    8.0 et 8.1 Oreo
    9 Pie

    Dans le cas d'un fichier contenant du code HTML, il est possible de le nettoyer avec l'option HTML

    • html=0 : le code HTML est affiché. Les balises sont visibles.
    • html=1 : aucun traitement, le code est exécuté
    • html=liste balise : toutes les balises seront supprimées à l'exclusion de celles passées en paramètres sous la forme a,img,...

    Code style dans le contenu

    Il est possible de styler classiquement le contenu à l'aide de balise HTML : mon texte en <strong>gras</strong>

    Pour agir globalement sur la cellule, vous pouvez indiquer la ou les classes à appliquer sous la forme : [nom_classe(s)]contenu au tout début du texte. Vous pouvez utiliser toutes les classes disponibles : celles de UP, celles de votre template et celles de l'action. A l'heure où j'écris cette démo, l'action csv2table propose ces classes :

    oui non red green orange blue

    Vous pouvez très facilement ajouter les votres dans la feuille de style ou dans le paramètre base-css.

    Mise en forme de la table

    L'aspect général est donné par le paramètre model.

    model non spécifié

    titre-1 titre-2 titre3
    col-1 col-2 col-3
    col-1 col-2 col-3
    col-1 col-2 col-3
    Pied-1 Pied-2 Pied-3

    model=blue

    titre-1 titre-2 titre3
    col-1 col-2 col-3
    col-1 col-2 col-3
    col-1 col-2 col-3
    Pied-1 Pied-2 Pied-3

    model=green

    titre-1 titre-2 titre3
    col-1 col-2 col-3
    col-1 col-2 col-3
    col-1 col-2 col-3
    Pied-1 Pied-2 Pied-3

    model=line

    titre-1 titre-2 titre3
    col-1 col-2 col-3
    col-1 col-2 col-3
    col-1 col-2 col-3
    Pied-1 Pied-2 Pied-3

    Options webmaster

    Pour faciliter et uniformiser la présentation, UP propose plusieurs mécanismes :

    • définir vos valeurs pour les paramètres dans le dossier custom/prefs.ini.
    • dupliquer le fichier CSS de l'action dans son sous-dossier custom. Vous pourrez modifier ou ajouter des règles sans risque d'écrasement

    Plus d'infos : Programmation : personnaliser une action