Guide complet des tableaux Markdown : syntaxe, formatage et alignement des colonnes

Les tuyaux mal alignés et les caractères non échappés interrompent fréquemment le rendu des tableaux de démarques dans GitHub, Obsidian et les sites de documentation statique. Syntaxe des tableaux principaux, marqueurs d'alignement et conversion HTML dans ce guide pratique.

Structured markdown table syntax highlighting pipe delimiters and colon alignment markers alongside rendered table output

La syntaxe de base : barres verticales et traits d'union

Dans les extensions GitHub Flavored Markdown (GFM) et CommonMark, les tableaux sont construits à l'aide de deux caractères principaux :

  • Tuyaux (|) : Colonnes séparées.
  • Traits d'union (-) : Définissez la ligne de délimiteur d'en-tête obligatoire.

Voici le tableau des démarques minimales viables :

| Article | Catégorie | Prix ​​|
| --- | --- | --- |
| Pomme | Fruits | 1,00 $ |
| Pain | Boulangerie | 2,50 $ |

La deuxième ligne (la ligne de délimiteur) est obligatoire. Sans cela, les analyseurs de démarques traitent le texte comme un paragraphe ordinaire plutôt que comme une structure de tableau.


Contrôle de l'alignement des colonnes (gauche, centre, droite)

Référence de marqueur d'alignement de colonne illustrant le positionnement du texte à gauche, au centre et à droite à l'aide du placement des deux-points

Vous pouvez spécifier l'alignement du texte sur une colonne entière en plaçant des deux-points ( :) sur la ligne de délimitation :

| Aligné à gauche | Aligné au centre | Aligné à droite |
| :--- | :---: | --- : |
| Le texte est aligné à gauche | Le texte est centré | Les nombres s'alignent à droite |
| Court | Longueur moyenne | 1 492,00 |
  • Alignement à gauche (:---) : Deux points à gauche (comportement par défaut).
  • Alignement au centre (:---:) : Deux points aux deux extrémités.
  • Alignement à droite (---:) : Deux points à droite (idéal pour les devises, les chiffres et les dates).

Échapper aux caractères spéciaux à l'intérieur des cellules

Guide d'échappement de caractères spéciaux montrant l'utilisation de la barre oblique inverse pour les symboles de barre oblique et les blocs de code en ligne dans les cellules du tableau

Étant donné que les barres verticales (|) délimitent les limites des cellules, placer une barre verticale à l'intérieur de votre texte brisera la disposition du tableau :


| Commande | Actions |
| ls | grep foo | Filtre les fichiers |


| Commande | Actions |
| ls\| grep foo | Filtre les fichiers |

Pour insérer des sauts de ligne dans une seule cellule, utilisez la balise HTML
 :

| Fonctionnalité | Détails |
| Compression | Mode avec perte
Mode sans perte |

Convertissez instantanément votre documentation Markdown en HTML propre et sémantique avec le convertisseur Convertisseur Markdown en HTML de ToolDolfen.

Anatomie visuelle d'un tableau de démarques mettant en évidence les délimiteurs d'en-tête obligatoires, les séparateurs de tuyaux et le contenu des cellules

Comparaison entre des tableaux de démarques propres et alignés sur les espaces et un formatage compact des délimiteurs bruts

Aperçu de la conversion de Markdown en tableau HTML montrant un style de wrapper CSS réactif et un défilement horizontal mobile

Guides complémentaires recommandés

Explorez les didacticiels et utilitaires complémentaires de ce groupe de sujets pour améliorer votre flux de travail numérique :

Normes de nombre de mots : essais, articles et calcul du temps de paroleTutoriel pratique étape par étape avec des normes vérifiées et des flux de travail dans le navigateur.Guide principal des limites de caractères : contraintes relatives aux médias sociaux, au référencement et aux SMSTutoriel pratique étape par étape avec des normes vérifiées et des flux de travail dans le navigateur.Conventions de casse de texte : casse de titre, UPPER, lower, camelCase, Snake_caseTutoriel pratique étape par étape avec des normes vérifiées et des flux de travail dans le navigateur.PNG vs SVG : choisir le bon format pour les icônes Web et LogosFlux de travail multiformat complémentaire connectant les données et les outils multimédias associés.
Utilitaire recommandé : Markdown vers HTMLExécutez ce flux de travail en direct dans votre navigateur sans aucun téléchargement sur le serveur et 100 % côté client confidentialité.
Convertisseur Markdown en HTML
Convertisseur Markdown en HTML

Foire Aux Questions

Trouvez des réponses rapides et vérifiées aux questions fréquentes sur ce flux de travail.

Comment inclure un tube vertical (|) à l'intérieur d'une cellule de tableau de démarque ?

Pour afficher un symbole de canal à l'intérieur d'une cellule sans casser la structure des colonnes, utilisez l'entité HTML | ou échappez le caractère avec une barre oblique inverse (\|).

Les tuyaux des colonnes doivent-ils s'aligner parfaitement pour que le démarque soit rendu correctement ?

Non. Les analyseurs Markdown ignorent l’espacement interne. Cependant, garder les tubes alignés verticalement dans votre texte source rend les différences git et les démarques brutes beaucoup plus faciles à lire et à réviser.

Pouvez-vous créer des paragraphes ou des listes multilignes dans une cellule de tableau de démarque ?

Standard CommonMark et GitHub Flavored Markdown (GFM) ne prennent pas en charge le texte multiligne à l'intérieur des cellules de tableau. Pour insérer un saut de ligne, insérez une balise HTML <br> explicite.

Bilal Ahmad