Tables

Helios provides clean, responsive table styling for presenting data in your documentation.

Basic Tables

Use standard markdown table syntax:

| Feature | Description | Status |
|---------|-------------|--------|
| Dark Mode | System preference with manual toggle | Available |
| Search | Full-text search with keyboard shortcuts | Available |

Column Alignment

Control column alignment with colons in the separator:

| Left-aligned | Center-aligned | Right-aligned |
|:-------------|:--------------:|--------------:|

Wide Tables

Wide tables automatically scroll horizontally on small screens:

Striped Tables

Add the striped class for alternating row colors:

Compact Tables

Use the compact class for denser tables:

Tables with Code

Tables can contain inline code:

Complex Tables

For more complex tables, use HTML:

Responsive Behavior

On mobile devices, wide tables become horizontally scrollable. The table header remains visible while scrolling.

Test this by resizing your browser window.

Styling Tables

Customize table styles in your CSS:

/* Custom table styling */
.prose table {
    @apply text-sm;
}

.prose th {
    @apply bg-primary text-white;
}

.prose td {
    @apply border-gray-200 dark:border-gray-700;
}

Best Practices

1. Keep it simple - Use tables for tabular data, not layout
2. Align numbers right - Makes comparison easier
3. Use consistent formatting - Same data types should look the same
4. Add headers - Always include a header row
5. Keep cells concise - Long content should be in paragraphs, not tables