Syntaxe des Tableaux

Les tableaux sont une partie importante de la syntaxe étendue de Markdown, utilisés pour afficher des données de manière structurée.

Syntaxe de Base des Tableaux

Tableau Simple

Utilisez le pipe | pour séparer les colonnes et - pour créer la ligne de séparation de l'en-tête :

markdown

| Nom  | Âge | Profession |
|------|-----|------------|
| Zhang | 25  | Ingénieur  |
| Li    | 30  | Designer   |
| Wang  | 28  | Chef de produit |

Rendu affiché :

Nom	Âge	Profession
Zhang	25	Ingénieur
Li	30	Designer
Wang	28	Chef de produit

Alignement des Colonnes

Utilisez les deux-points : pour contrôler l'alignement des colonnes :

markdown

| Aligné à gauche | Centré | Aligné à droite |
|:----------------|:------:|---------------:|
| Contenu 1       | Contenu 1 | Contenu 1    |
| Contenu 2       | Contenu 2 | Contenu 2    |
| Contenu 3       | Contenu 3 | Contenu 3    |

Rendu affiché :

Aligné à gauche	Centré	Aligné à droite
Contenu 1	Contenu 1	Contenu 1
Contenu 2	Contenu 2	Contenu 2
Contenu 3	Contenu 3	Contenu 3

Détails sur l'Alignement

Syntaxe d'Alignement

Syntaxe	Alignement	Exemple
`---`	Gauche (défaut)	`
`:--:`	Centré	`
`--:`	Droite	`

Tableaux de Données Numériques

L'alignement à droite est adapté à l'affichage des nombres :

markdown

| Produit | Prix | Ventes | Chiffre d'affaires |
|:--------|-----:|-------:|-------------------:|
| A       | ¥99  | 1 250  | ¥123 750           |
| B       | ¥199 | 856    | ¥170 344           |
| C       | ¥299 | 432    | ¥129 168           |
| **Total** |     | **2 538** | **¥423 262** |

Rendu affiché :

Produit	Prix	Ventes	Chiffre d'affaires
A	¥99	1 250	¥123 750
B	¥199	856	¥170 344
C	¥299	432	¥129 168
Total		2 538	¥423 262

Formatage dans les Tableaux

Mise en Forme Inline

Les cellules de tableau supportent la mise en forme Markdown inline :

markdown

| Fonctionnalité   | Statut      | Description                     |
|------------------|-------------|---------------------------------|
| **Connexion**    | ✅ Fait     | Connexion par email             |
| *Inscription*    | 🚧 En cours | Inscription tierce supportée    |
| `Réinitialiser le mot de passe` | ❌ À faire | Réinitialisation par email |
| [Espace utilisateur](/) | ⏳ Prévu | Gestion des informations utilisateur |

Rendu affiché :

Fonctionnalité	Statut	Description
Connexion	✅ Fait	Connexion par email
Inscription	🚧 En cours	Inscription tierce supportée
`Réinitialiser le mot de passe`	❌ À faire	Réinitialisation par email
Espace utilisateur	⏳ Prévu	Gestion des informations utilisateur

Code dans les Tableaux

markdown

| Commande | Fonction      | Exemple           |
|----------|--------------|-------------------|
| `ls`     | Lister fichiers | `ls -la`        |
| `cd`     | Changer dossier | `cd /home/user` |
| `mkdir`  | Créer dossier   | `mkdir nouveau-dossier` |
| `rm`     | Supprimer fichiers | `rm -rf dossier/` |

Rendu affiché :

Commande	Fonction	Exemple
`ls`	Lister fichiers	`ls -la`
`cd`	Changer dossier	`cd /home/user`
`mkdir`	Créer dossier	`mkdir nouveau-dossier`
`rm`	Supprimer fichiers	`rm -rf dossier/`

Exemples de Tableaux Complexes

Tableau de Comparaison Technologique

markdown

| Fonctionnalité      | React | Vue | Angular |
|:-------------------|:-----:|:---:|:-------:|
| **Courbe d'apprentissage** | Moyenne | Facile | Difficile |
| **Performance**    | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **Écosystème**     | Riche | Bon  | Complet |
| **Support entreprise** | Facebook | Indépendant | Google |
| **TypeScript**     | ✅    | ✅   | ✅ Intégré |
| **Activité communauté** | Très élevée | Élevée | Moyenne |

Rendu affiché :

Fonctionnalité	React	Vue	Angular
Courbe d'apprentissage	Moyenne	Facile	Difficile
Performance	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Écosystème	Riche	Bon	Complet
Support entreprise	Facebook	Indépendant	Google
TypeScript	✅	✅	✅ Intégré
Activité communauté	Très élevée	Élevée	Moyenne

Tableau de Documentation API

markdown

| Paramètre | Type     | Obligatoire | Défaut   | Description                |
|----------|----------|:-----------:|----------|----------------------------|
| `id`     | `number` | ✅          | -        | Identifiant unique utilisateur |
| `name`   | `string` | ✅          | -        | Nom de l'utilisateur         |
| `email`  | `string` | ✅          | -        | Email de l'utilisateur       |
| `age`    | `number` | ❌          | `null`   | Âge de l'utilisateur        |
| `avatar` | `string` | ❌          | `"/default.jpg"` | URL de l'avatar |
| `status` | `enum`   | ❌          | `"active"` | Statut : `active` \| `inactive` |

Rendu affiché :

Paramètre	Type	Obligatoire	Défaut	Description
`id`	`number`	✅	-	Identifiant unique utilisateur
`name`	`string`	✅	-	Nom de l'utilisateur
`email`	`string`	✅	-	Email de l'utilisateur
`age`	`number`	❌	`null`	Âge de l'utilisateur
`avatar`	`string`	❌	`"/default.jpg"`	URL de l'avatar
`status`	`enum`	❌	`"active"`	Statut : `active` \| `inactive`

Conseils de Formatage de Tableau

Utiliser des Émojis

markdown

| OS      | Support | Remarque      |
|---------|:-------:|--------------|
| Windows | ✅      | Support complet |
| macOS   | ✅      | Support complet |
| Linux   | ⚠️      | Support partiel |
| iOS     | ❌      | Non supporté   |
| Android | 🚧      | En développement |

Rendu affiché :

OS	Support	Remarque
Windows	✅	Support complet
macOS	✅	Support complet
Linux	⚠️	Support partiel
iOS	❌	Non supporté
Android	🚧	En développement

Utiliser des Badges

markdown

| Projet  | Statut | Version |
|---------|--------|---------|
| React   | ![Stable](https://img.shields.io/badge/status-stable-green) | `v18.2.0` |
| Vue     | ![Stable](https://img.shields.io/badge/status-stable-green) | `v3.3.0`  |
| Angular | ![Beta](https://img.shields.io/badge/status-beta-orange)    | `v16.0.0` |

Gestion des Cellules Vides

Représentation du Contenu Vide

markdown

| Élément | T1   | T2   | T3   | T4   |
|---------|:----:|:----:|:----:|:----:|
| Chiffre d'affaires | 1M   | 1,2M | -    | -    |
| Dépense | 800K | 900K | 950K | -    |
| Profit  | 200K | 300K |      |      |

Rendu affiché :

Élément	T1	T2	T3	T4
Chiffre d'affaires	1M	1,2M	-	-
Dépense	800K	900K	950K	-
Profit	200K	300K

Erreurs et Solutions Communes

1. Pipes Mal Alignés

markdown

❌ Incorrect :
| Nom | Âge|Profession|
|-----|----|----------|
|Zhang|25|Ingénieur|

✅ Correct :
| Nom | Âge | Profession |
|-----|-----|------------|
| Zhang | 25  | Ingénieur  |

2. Ligne de Séparation Manquante

markdown

❌ Incorrect :
| Nom | Âge | Profession |
| Zhang | 25 | Ingénieur |

✅ Correct :
| Nom | Âge | Profession |
|-----|-----|------------|
| Zhang | 25  | Ingénieur  |

3. Nombre de Colonnes Incohérent

markdown

❌ Incorrect :
| Nom | Âge | Profession |
|-----|-----|------------|
| Zhang | 25 |  ← Colonne manquante

✅ Correct :
| Nom | Âge | Profession |
|-----|-----|------------|
| Zhang | 25  | Ingénieur  |

4. Gestion des Caractères Spéciaux

markdown

❌ Problème :
| Prix | Description |
|------|-------------|
| $100|taxe incluse |  ← Pipe mal utilisé

✅ Solution :
| Prix | Description |
|------|-------------|
| $100 | taxe incluse |
| $200 | Prix\|taxe incluse |  ← Échapper le pipe

Fonctionnalités Avancées de Tableau

Amélioration avec HTML

markdown

<table>
  <tr>
    <th colspan="2">En-tête fusionné</th>
    <th>Colonne normale</th>
  </tr>
  <tr>
    <td rowspan="2">Ligne fusionnée</td>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
  </tr>
  <tr>
    <td>Donnée 3</td>
    <td>Donnée 4</td>
  </tr>
</table>

Rendu affiché :

En-tête fusionné		Colonne normale
Ligne fusionnée	Donnée 1	Donnée 2
Ligne fusionnée	Donnée 3	Donnée 4

Styles de Tableau Personnalisés

markdown

<table style="width: 100%; border-collapse: collapse;">
  <tr style="background-color: #f0f0f0;">
    <th style="border: 1px solid #ddd; padding: 8px;">Produit</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Prix</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">A</td>
    <td style="border: 1px solid #ddd; padding: 8px; color: red;">¥99</td>
  </tr>
</table>

Scénarios d'Application Pratique

1. Gestion de Projet

markdown

## Tableau d'avancement des tâches

| Tâche | Responsable | Début | Fin | Statut | Avancement |
|-------|-------------|-------|-----|:------:|:----------:|
| Analyse des besoins | Zhang | 2023-10-01 | 2023-10-07 | ✅ | 100% |
| Design UI | Li | 2023-10-08 | 2023-10-15 | 🚧 | 75% |
| Dev Frontend | Wang | 2023-10-16 | 2023-10-30 | ⏳ | 0% |
| Dev Backend | Zhao | 2023-10-16 | 2023-11-05 | ⏳ | 0% |
| Tests | Sun | 2023-11-06 | 2023-11-12 | ⏳ | 0% |

2. Comparaison de Produits

markdown

## Comparatif des abonnements

| Fonctionnalité | Gratuit | Pro | Entreprise |
|----------------|:------:|:---:|:----------:|
| **Limite d'utilisateurs** | 5 | 50 | Illimité |
| **Stockage** | 1Go | 100Go | 1To |
| **Appels API** | 1000/mois | 100k/mois | Illimité |
| **Support** | Communauté | Email | Dédié |
| **SLA** | - | 99,9% | 99,99% |
| **Prix** | Gratuit | ¥99/mois | ¥999/mois |
| | [Choisir](/) | [Choisir](/) | [Contactez-nous](/) |

3. Rapport Financier

markdown

## Rapport financier mensuel

| Élément | Jan | Fév | Mar | Total |
|---------|-----:|-----:|-----:|------:|
| **Revenus** |     |     |     |      |
| Ventes produits | 50 000 | 55 000 | 60 000 | 165 000 |
| Revenus services | 20 000 | 22 000 | 25 000 | 67 000 |
| Autres revenus | 2 000 | 1 500 | 3 000 | 6 500 |
| *Sous-total* | *72 000* | *78 500* | *88 000* | *238 500* |
| **Dépenses** |     |     |     |      |
| Salaires | 30 000 | 30 000 | 30 000 | 90 000 |
| Loyer bureaux | 8 000 | 8 000 | 8 000 | 24 000 |
| Marketing | 10 000 | 12 000 | 15 000 | 37 000 |
| *Sous-total* | *48 000* | *50 000* | *53 000* | *151 000* |
| **Bénéfice net** | **24 000** | **28 500** | **35 000** | **87 500** |

Bonnes Pratiques

1. Rester Simple

markdown

✅ Recommandé : Simple et clair
| Élément | Statut |
|---------|--------|
| A       | Fait   |
| B       | En cours |

❌ Non recommandé : Trop d'informations
| Nom du projet | Statut actuel | Description détaillée | Responsable | Début | Fin | Remarques |

2. Utiliser des En-têtes Parlants

markdown

✅ Recommandé : En-têtes descriptifs
| Langage de programmation | Difficulté | Application |

❌ Non recommandé : En-têtes vagues
| Élément1 | Élément2 | Élément3 |

3. Utiliser l'Alignement à Bon Escient

markdown

✅ Recommandé : Nombres alignés à droite
| Produit | Prix | Quantité |
|:--------|-----:|--------:|
| A       | ¥100 | 50      |

✅ Recommandé : Texte aligné à gauche
| Nom | Département | Poste |
|:----|:------------|:------|
| Zhang | Tech      | Ingénieur |

Sortie HTML

Les tableaux Markdown sont convertis en HTML :

markdown

| Nom | Âge |
|-----|-----|
| Zhang | 25 |

Devient :

html

<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Âge</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zhang</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Syntaxes Relatives

Vue d'ensemble de la syntaxe de base - Bases du Markdown
Vue d'ensemble des extensions - Plus d'extensions
Syntaxe HTML - Améliorations HTML

Pratique

Essayez de créer les tableaux suivants :

Un tableau de présentation de l'équipe
Un tableau comparatif de prix de produits
Un tableau de suivi d'avancement de projet
Un tableau d'évaluation de stack technique

Outils Recommandés

Générateurs de Tableaux

Outils en ligne : Tables Generator, Markdown Tables Generator
Plugins éditeur : VS Code Markdown Table, Typora Table Editing
Outils de conversion : Excel vers Markdown, CSV vers Markdown

Embellissement de Tableaux

Frameworks CSS : Bootstrap, Tailwind CSS
Librairies de tableaux : DataTables, AG Grid
Extensions Markdown : markdown-it-table, remark-gfm

Syntaxe des Tableaux ​

Syntaxe de Base des Tableaux ​

Tableau Simple ​

Alignement des Colonnes ​

Détails sur l'Alignement ​

Syntaxe d'Alignement ​

Tableaux de Données Numériques ​

Formatage dans les Tableaux ​

Mise en Forme Inline ​

Code dans les Tableaux ​

Exemples de Tableaux Complexes ​

Tableau de Comparaison Technologique ​

Tableau de Documentation API ​

Conseils de Formatage de Tableau ​

Utiliser des Émojis ​

Utiliser des Badges ​

Gestion des Cellules Vides ​

Représentation du Contenu Vide ​

Erreurs et Solutions Communes ​

1. Pipes Mal Alignés ​

2. Ligne de Séparation Manquante ​

3. Nombre de Colonnes Incohérent ​

4. Gestion des Caractères Spéciaux ​

Fonctionnalités Avancées de Tableau ​

Amélioration avec HTML ​

Styles de Tableau Personnalisés ​

Scénarios d'Application Pratique ​

1. Gestion de Projet ​

2. Comparaison de Produits ​

3. Rapport Financier ​

Bonnes Pratiques ​

1. Rester Simple ​

2. Utiliser des En-têtes Parlants ​

3. Utiliser l'Alignement à Bon Escient ​

Sortie HTML ​

Syntaxes Relatives ​

Pratique ​

Outils Recommandés ​

Générateurs de Tableaux ​

Embellissement de Tableaux ​

Syntaxe des Tableaux

Syntaxe de Base des Tableaux

Tableau Simple

Alignement des Colonnes

Détails sur l'Alignement

Syntaxe d'Alignement

Tableaux de Données Numériques

Formatage dans les Tableaux

Mise en Forme Inline

Code dans les Tableaux

Exemples de Tableaux Complexes

Tableau de Comparaison Technologique

Tableau de Documentation API

Conseils de Formatage de Tableau

Utiliser des Émojis

Utiliser des Badges

Gestion des Cellules Vides

Représentation du Contenu Vide

Erreurs et Solutions Communes

1. Pipes Mal Alignés

2. Ligne de Séparation Manquante

3. Nombre de Colonnes Incohérent

4. Gestion des Caractères Spéciaux

Fonctionnalités Avancées de Tableau

Amélioration avec HTML

Styles de Tableau Personnalisés

Scénarios d'Application Pratique

1. Gestion de Projet

2. Comparaison de Produits

3. Rapport Financier

Bonnes Pratiques

1. Rester Simple

2. Utiliser des En-têtes Parlants

3. Utiliser l'Alignement à Bon Escient

Sortie HTML

Syntaxes Relatives

Pratique

Outils Recommandés

Générateurs de Tableaux

Embellissement de Tableaux