---
title: Lists and tables
description: Write clear ordered and unordered lists, then present structured data with Markdown tables.
---

Use lists to organize steps or ideas. Use tables to compare values across consistent columns.

<ComponentPreview>
  ```mdx
  ## Weekend Plan

  1. Choose a destination.
  2. Book train tickets.
  3. Pack a day bag.

  - Weather: Sunny
  - Budget: Medium

  | Item | Estimate |
  | --- | ---: |
  | Train tickets | 45 |
  | Lunch | 18 |
  ```
</ComponentPreview>

## Lists

### Unordered lists

Use unordered lists when sequence does not matter.

<ComponentPreview showAllCode>
  ```mdx
  - Apples
  - Bananas
  - Bread
  ```
</ComponentPreview>

### Ordered lists

Use ordered lists when readers should complete items in sequence.

<ComponentPreview showAllCode>
  ```mdx
  1. Fill a kettle with water.
  2. Heat until boiling.
  3. Pour over tea leaves.
  ```
</ComponentPreview>

### Nested lists

Use nested lists to add sub-steps or grouped details.

<ComponentPreview showAllCode>
  ```mdx
  1. Plan dinner
    - Pick a main dish
    - Pick a side dish
  2. Shop for ingredients
    - Check pantry first
  ```
</ComponentPreview>

<Callout type="tip" title="Choose the right list type">
  Use unordered lists for options or grouped items. Use ordered lists for
  instructions and workflows.
</Callout>

## Tables

### Basic tables

Use tables when each row shares the same fields.

<ComponentPreview showAllCode>
  ```mdx
  | Movie | Genre | Runtime |
  | --- | --- | --- |
  | Moonrise Kingdom | Comedy | 94 min |
  | Arrival | Sci-fi | 116 min |
  | Spirited Away | Animation | 125 min |
  ```
</ComponentPreview>

### Alignment

Use alignment markers in the separator row when readability depends on numeric or status columns.

<ComponentPreview showAllCode>
  ```mdx
  | Item | Price | In stock |
  | :--- | ---: | :---: |
  | Bread | 3.50 | Yes |
  | Olive oil | 9.25 | Yes |
  | Basil | 1.80 | No |
  ```
</ComponentPreview>

### Formatting inside cells

Use inline formatting in table cells for clarity, but keep it minimal.

<ComponentPreview showAllCode>
  ```mdx
  | Style | Example |
  | --- | --- |
  | Inline code | `2 tbsp sugar` |
  | Emphasis | **Important** |
  | Link | [Farmers market](https://example.com) |
  ```
</ComponentPreview>

<Callout type="warning" title="Keep tables focused">
  If a table has too many columns or long paragraphs, split it into smaller
  tables or convert it to sections with headings.
</Callout>