Table Block
Create structured data tables with headers, rows, and optional captions. Supports zebra striping for improved readability. Ideal for comparisons, specifications, and tabular data.
Tables present structured data in rows and columns. Use them when information needs to be compared, when showing specifications, or when data has a natural tabular structure.
When to Use
Block Properties
| Property | Required | Description |
|---|---|---|
| Headers | Yes | Column headers for the table |
| Rows | Yes | Data rows with cells matching the header columns |
| Caption | No | Optional table description shown below the table |
| Striped | No | Toggle zebra striping for alternating row colours |
Example: Feature Comparison
A comparison table showing features across different tiers.
| Feature | Free | Pro | Enterprise |
|---|---|---|---|
| Projects | 3 | Unlimited | Unlimited |
| Storage | 1 GB | 50 GB | 500 GB |
| Team Members | 1 | 10 | Unlimited |
| API Access | No | Yes | Yes |
| SSO | No | No | Yes |
| Priority Support | No | No | Yes |
Example: Technical Specifications
A table without zebra striping for a cleaner look with fewer rows.
| Property | Value |
|---|---|
| Protocol | HTTPS |
| Port | 443 |
| Timeout | 30 seconds |
| Max Payload | 10 MB |
Example: Schedule
Tables work well for schedules and timelines.
| Day | Environment | Time (UTC) | Owner |
|---|---|---|---|
| Monday | Development | 09:00 | Dev Team |
| Wednesday | Staging | 14:00 | QA Team |
| Friday | Production | 10:00 | Platform Team |
Editing Tables
| Action | How To |
|---|---|
| Edit Cell | Click any cell to edit its content |
| Add Column | Use the + button in the header row |
| Add Row | Use the + Add Row button below the table |
| Delete Row | Hover over a row to reveal the delete button |
| Toggle Striping | Use the Striped Rows toggle for alternating backgrounds |