Tuto mise en page #6 - Comment présenter un tableau dans son article [Markdown] ?steemCreated with Sketch.

in fr •  11 months ago

Steemit-tableau.png


Pour continuer sur notre belle lancée, je vais vous montrer comment créer un joli tableau sur Steemit.

Créer un tableau en Markdown n'est pas très compliqué mais il faut faire attention aux détails (En gros, faut pas rater sa mise en forme qui mine de rien est composé d'un tas de points/lignes et faut pas que tout se mélange dans ta tête).

Un tableau est défini de la manière suivante :

|       |       |       |       |       |
|---    |:-:    |:-:    |:-:    |--:    |
|       |       |       |       |       |
|       |       |       |       |       |
|       |       |       |       |       |

Dans ce cas-ci, il y a 5 colonnes. Vous pouvez en ajouter bien entendu autant que nécessaire. N'hésitez pas à copiez-coller la mise en forme de cet article, c'est prévu pour ça !

Titres

La première ligne permet d'ajouter les titres.
Il seront automatiquement présenté en gras (c'est comme ça, tu as pas le choix et d'ailleurs c'est assez logique pour une belle mise en page/une mise en page claire).

Alignement

Le seconde ligne permet de déterminer l'alignement des données dans le tableau.

  • --- Le contenu est aligné à gauche
  • :-: le contenu est centré
    (Euuuh... c'est sensé fonctionner mais visiblement pas sous steemit.com, vous avez la même chose ?)
  • --: le contenu est aligné à droite

Données

Le reste des lignes permet d'ajouter des données dans votre tableau.
Si vous voulez mettre en valeur certains éléments, Il est possible d'utiliser la mise en forme habituelle.

Exemple

|   Emoji   |   Nom |   Hex |   Dec |   Prix    |
|---    |:-:    |:-:    |:-:    |--:    |
|   😀   |   GRINNING FACE   |   ```😀``` |   ```😀``` |   0.05 €  |
|   😂   |   FACE WITH TEARS OF JOY  |   ```😂``` |   ```😂``` |   0.12 €  |
|   🤣   |   ROLLING ON THE FLOOR LAUGHING   |   ```🤣``` |   ```🤣``` |   0.09 €  |

Résultat

EmojiNomHexDecPrix
😀GRINNING FACE😀😀0.05 €
😂FACE WITH TEARS OF JOY😂😂0.12 €
🤣ROLLING ON THE FLOOR LAUGHING🤣🤣0.09 €

Astuce

Pour ma part, je préfère utiliser le site tablesgenerator.com qui me facilite la vie.
Ce site permet de faire toutes les manipulation et de voir directement le résultat.
Il est même possible d'importer des données depuis un fichier Excel ou CSV.

Et un article avec 3 colonnes, ça vous dit ?

Si vous souhaitez écrire un article avec trois colonnes, je vous renvoie vers ma compatriote belge, @becometheartist qui a fait un très bon article à ce sujet.

Donc voilà, vous êtes maintenu passé maitre en création de tableau ! Félicitation! La vie est plus facile quand on en connait les règles, non ?

(Et si vous rêvez de pouvoir ajouter facilement des Emojis dans vos articles pour ajouter un peu plus de peps, ça arrive demain, promis !).


Retrouve mes articles précédents sur #comprendre-steem !

👉 Si tu aimes cet article, n'hésite pas à upvoter / commenter / resteemer
(parce que c'est vachement gratifiant de se sentir soutenue !).

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Maintenant, à chaque fois que je voudrais écrire un article sur Steemit, je lis et relis et rerelis ta page de tuto pour m'aider. Merci Roxane! C'est très utile :-)

·

:-) Merci pour ce commentaire !!!! Tellement gratifiant ! <3

C'est vrai que tes tutos sont toujours concis et pratiques pour qui veut améliorer ses mises en pages Steemit. Bon, ça ne fonctionne pas toujours comme ça devrait, mais le html...

Merci pour ce super tutoriel !

Coucou! Cool ce tablegenerator !

et merci beaucoup pour le partage 👼

·

Il est trop bien ce site, n'est ce pas ??? :-D Ca simplifie TELLEMENT LA VIE !

Coucou @roxane,
Sais tu commencer changer la largeur des colonnes ? Je ne trouve pas l'info...

·

Malheureusement je ne pense pas qu'il soit possible d'ajuster la largeur des colonnes sur steemit.
L'éditeur markdown considère toutes les colonnes comme égales et ajuste leur taille selon le contenu.

@becometheartist avait présenté une solution en HTML mais elle explique que steemit ne gère pas ce genre de configuration :-/

·
·

Merci @roxane, c'est ce que je me suis dit. Je peux abuser et te poser encore une question ? :-) Il s'agit de ton tuto sur les vignettes sur CANVA... C'est bien miniature Youtube que tu sélectionnes ?? Car mes vignettes n'occupent pas la totalité de la fenêtre... ça m'agace !!!

·
·
·

Coucou !
Exact, j'utilise la vignette YOUTUBE :-D
En tout cas tes vignettes sont de mieux en mieux ! Félicitation !

·
·
·
·

Mdr, j'ouvre un par un mes messages et c'est encore toi je t'ai répondu sur le message précédent hihi tu me diras.