Tables
4 min
Table blocks organize structured information into rows and columns. Archbee supports both standard Markdown tables for simple data and HTML tables for advanced formatting and styling.
Syntax
You can add this component using either Markdown or MDX.
| Column 1 | Column 2 |
|----------|----------|
| Cell 1 | Cell 2 |Markdown tables are ideal for displaying simple structured data. Use HTML tables when you need additional formatting options, such as custom colors, alignment, column widths, or merged cells.
HTML tables support the following attributes:
- isTableHeaderOn
- columnWidths
- lightBackgroundColor
- darkBackgroundColor
- align
- colSpan
- rowSpan
Examples
The following example demonstrates both supported table formats.
Markdown table
| Feature | Free | Pro | Enterprise |
|---------|------|-----|------------|
| Spaces | 3 | 20 | Unlimited |
| API Access | - | Yes | Yes |
| Custom Domain | - | - | Yes |
| SSO/SAML | - | - | Yes |HTML table with colors
<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.