Tabellen

4 min

Tabelle Blöcke organisieren strukturierte Informationen in Zeilen und Spalten. Archbee unterstützt sowohl Standard-Markdown-Tabellen für einfache Daten als auch HTML-Tabellen für erweitertes Formatieren und Styling.

Syntax

Sie können diese Komponente entweder mit Markdown oder MDX hinzufügen.

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>

Markdown-Tabellen eignen sich ideal zur Darstellung einfacher strukturierter Daten. Verwenden Sie HTML-Tabellen, wenn Sie zusätzliche Formatierungsoptionen wie benutzerdefinierte Farben, Ausrichtung, Spaltenbreiten oder zusammengeführte Zellen benötigen.

HTML-Tabellen unterstützen die folgenden Attribute:

isTableHeaderOn

columnWidths

lightBackgroundColor

darkBackgroundColor

ausrichten

colSpan

rowSpan

Beispiele

Das folgende Beispiel zeigt beide unterstützten Tabellenformate.

Markdown-Tabelle

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

HTML-Tabelle mit Farben

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