Tables

4 min

Table 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.

Markdown

MDX

| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |

<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

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

Tableau HTML avec couleurs

<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>

Have a question?

Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.

To ask a question or participate in discussions, you'll need to authenticate first.