---
title: Tabellen
slug: docs/de/tabellen
createdAt: 2026-06-05T14:31:06.806Z
---

[Tabelle](docId\:YImTRk3JV-sIxpXtCjLXx) 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.

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

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

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

### HTML-Tabelle mit Farben

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