---
title: Tables
slug: docs/fr/tables
createdAt: 2026-06-05T14:31:06.806Z
---

[Table](docId:66lbkvBbdaa9_4_JVMFG9) les blocs organisent des informations structurées en lignes et en colonnes. Archbee prend en charge à la fois les tableaux Markdown standards pour des données simples et les tableaux HTML pour une mise en forme et un style avancés.

## Syntaxe

Vous pouvez ajouter ce composant en utilisant soit Markdown soit MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |
```
:::

:::Tab{title="MDX"}
```html
<table isTableHeaderOn="true" columnWidths="200,200">
  <tr>
    <td align="center"><p><strong>Name</strong></p></td>
    <td align="center"><p><strong>Value</strong></p></td>
  </tr>
  <tr>
    <td><p>Item</p></td>
    <td><p>123</p></td>
  </tr>
</table>
```
:::
::::

Les tableaux Markdown sont idéaux pour afficher des données structurées simples. Utilisez des tableaux HTML lorsque vous avez besoin d’options de mise en forme supplémentaires, comme des couleurs personnalisées, l’alignement, les largeurs de colonnes ou la fusion de cellules.

Les tableaux HTML prennent en charge les attributs suivants :

- `isTableHeaderOn`
- `columnWidths`
- `lightBackgroundColor`
- `darkBackgroundColor`
- `aligner`
- `colSpan`
- `rowSpan`

## Exemples

L’exemple suivant montre les deux formats de tableaux pris en charge.

### Tableau Markdown

```markdown
| Feature | Free | Pro | Enterprise |
|---------|------|-----|------------|
| Spaces | 3 | 20 | Unlimited |
| API Access | - | Yes | Yes |
| Custom Domain | - | - | Yes |
| SSO/SAML | - | - | Yes |
```

### Tableau HTML avec couleurs

```html
<table isTableHeaderOn="true" columnWidths="200,200,200">
  <tr>
    <td darkBackgroundColor="#1E40AF" lightBackgroundColor="#3B82F6" align="center">
      <p><strong>Service</strong></p>
    </td>
    <td darkBackgroundColor="#1E40AF" lightBackgroundColor="#3B82F6" align="center">
      <p><strong>Status</strong></p>
    </td>
    <td darkBackgroundColor="#1E40AF" lightBackgroundColor="#3B82F6" align="center">
      <p><strong>Uptime</strong></p>
    </td>
  </tr>
  <tr>
    <td align="left">
      <p>API</p>
    </td>
    <td darkBackgroundColor="#166534" lightBackgroundColor="#86EFAC" align="center">
      <p>Operational</p>
    </td>
    <td align="center">
      <p>99.99%</p>
    </td>
  </tr>
  <tr>
    <td align="left">
      <p>CDN</p>
    </td>
    <td darkBackgroundColor="#166534" lightBackgroundColor="#86EFAC" align="center">
      <p>Operational</p>
    </td>
    <td align="center">
      <p>99.98%</p>
    </td>
  </tr>
  <tr>
    <td align="left">
      <p>Search</p>
    </td>
    <td darkBackgroundColor="#9A3412" lightBackgroundColor="#FED7AA" align="center">
      <p>Degraded</p>
    </td>
    <td align="center">
      <p>99.2%</p>
    </td>
  </tr>
</table>
```