> ## Documentation Index
> Fetch the complete documentation index at: https://react-docx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Table

Tables with headers, borders, cell spanning, and styling.

```tsx theme={"dark"}
<Table className="border">
  <Thead>
    <Tr>
      <Th className="border p-2">Name</Th>
      <Th className="border p-2">Price</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$10</Td>
    </Tr>
  </Tbody>
</Table>
```

***

## Components

| Component | Description                   |
| --------- | ----------------------------- |
| `Table`   | Table container               |
| `Thead`   | Header section                |
| `Tbody`   | Body section                  |
| `Tr`      | Table row                     |
| `Th`      | Header cell (bold by default) |
| `Td`      | Data cell                     |

***

## Props

### Table

| Prop        | Type                                       | Description               |
| ----------- | ------------------------------------------ | ------------------------- |
| `children`  | `ReactNode`                                | Thead, Tbody, Tr elements |
| `className` | `string`                                   | Tailwind classes          |
| `width`     | `"full"` \| `"auto"` \| `MeasurementValue` | Table width               |

### Tr

| Prop        | Type               | Description       |
| ----------- | ------------------ | ----------------- |
| `children`  | `ReactNode`        | Th or Td elements |
| `className` | `string`           | Tailwind classes  |
| `height`    | `MeasurementValue` | Row height        |

### Th / Td

| Prop        | Type        | Description      |
| ----------- | ----------- | ---------------- |
| `children`  | `ReactNode` | Cell content     |
| `className` | `string`    | Tailwind classes |
| `colSpan`   | `number`    | Horizontal span  |
| `rowSpan`   | `number`    | Vertical span    |

***

## Width

```tsx theme={"dark"}
// Full width (default)
<Table width="full">

// Shrink to content
<Table width="auto">

// Fixed width
<Table width="4in">
<Table width="10cm">
```

***

## Borders

### All borders

```tsx theme={"dark"}
<Table className="border">
  <Tbody>
    <Tr>
      <Td className="border">Cell</Td>
    </Tr>
  </Tbody>
</Table>
```

### Border colors

```tsx theme={"dark"}
<Td className="border border-gray-300">Light border</Td>
<Td className="border border-blue-500">Blue border</Td>
```

### Border thickness

```tsx theme={"dark"}
<Td className="border">Normal</Td>
<Td className="border-2">Thicker</Td>
<Td className="border-4">Even thicker</Td>
```

### Individual sides

```tsx theme={"dark"}
<Td className="border-b">Bottom only</Td>
<Td className="border-t border-b">Top and bottom</Td>
```

***

## Padding

```tsx theme={"dark"}
<Td className="p-2">All sides</Td>
<Td className="px-4 py-2">Horizontal and vertical</Td>
<Td className="pt-2 pb-4 pl-2 pr-2">Individual sides</Td>
```

***

## Background colors

```tsx theme={"dark"}
<Th className="bg-gray-100">Header</Th>
<Td className="bg-green-50">Highlighted cell</Td>
<Tr className="bg-yellow-50">
  <Td>Entire row highlighted</Td>
</Tr>
```

***

## Alignment

### Horizontal

```tsx theme={"dark"}
<Td className="text-left">Left</Td>
<Td className="text-center">Center</Td>
<Td className="text-right">Right</Td>
```

### Vertical

```tsx theme={"dark"}
<Td className="align-top">Top</Td>
<Td className="align-middle">Middle</Td>
<Td className="align-bottom">Bottom</Td>
```

***

## Column span

```tsx theme={"dark"}
<Table className="border">
  <Thead>
    <Tr>
      <Th colSpan={2} className="border p-2 text-center">
        Sales Report
      </Th>
    </Tr>
    <Tr>
      <Th className="border p-2">Product</Th>
      <Th className="border p-2">Revenue</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$1,000</Td>
    </Tr>
  </Tbody>
</Table>
```

***

## Row span

```tsx theme={"dark"}
<Table className="border">
  <Tbody>
    <Tr>
      <Td rowSpan={3} className="border p-2 align-middle">
        Electronics
      </Td>
      <Td className="border p-2">Laptop</Td>
      <Td className="border p-2">$999</Td>
    </Tr>
    <Tr>
      <Td className="border p-2">Tablet</Td>
      <Td className="border p-2">$499</Td>
    </Tr>
    <Tr>
      <Td className="border p-2">Phone</Td>
      <Td className="border p-2">$799</Td>
    </Tr>
  </Tbody>
</Table>
```

No placeholder cells needed for spanned rows.

***

## Rich content

Cells can contain formatted text:

```tsx theme={"dark"}
<Td className="border p-2">
  <Text className="font-bold">$1,234</Text>
  <Text className="text-green-600 text-sm"> (+12%)</Text>
</Td>
```

***

## Row height

```tsx theme={"dark"}
<Tr height="0.5in">
  <Td>Fixed height row</Td>
</Tr>
```

***

## Full example

```tsx theme={"dark"}
<Table className="border" width="full">
  <Thead>
    <Tr className="bg-gray-100">
      <Th className="border p-2">Product</Th>
      <Th className="border p-2 text-right">Q1</Th>
      <Th className="border p-2 text-right">Q2</Th>
      <Th className="border p-2 text-right">Total</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2 font-bold">Widget A</Td>
      <Td className="border p-2 text-right">$12,000</Td>
      <Td className="border p-2 text-right">$15,000</Td>
      <Td className="border p-2 text-right font-bold">$27,000</Td>
    </Tr>
    <Tr>
      <Td className="border p-2 font-bold">Widget B</Td>
      <Td className="border p-2 text-right">$8,500</Td>
      <Td className="border p-2 text-right">$9,200</Td>
      <Td className="border p-2 text-right font-bold">$17,700</Td>
    </Tr>
    <Tr className="bg-gray-50">
      <Td className="border p-2 font-bold">Total</Td>
      <Td className="border p-2 text-right font-bold">$20,500</Td>
      <Td className="border p-2 text-right font-bold">$24,200</Td>
      <Td className="border p-2 text-right font-bold text-green-600">$44,700</Td>
    </Tr>
  </Tbody>
</Table>
```

***

## Limitations

* No individual column width control
* No floating/positioned tables
* No table rotation
* No named table styles