# Tables

## Border Spacing

Control the border-spacing property of a table. This property applies only when
`border-collapse` is set to `separate`.

```jsx
<chakra.table borderSpacing="2" borderCollapse="separate">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>
```

| Prop            | CSS Property     | Token Category |
| --------------- | ---------------- | -------------- |
| `borderSpacing` | `border-spacing` | `spacing`      |

## Border Spacing X

Use the `borderSpacingX` prop to set the horizontal border-spacing property of a
table. This requires the `borderSpacing` prop to be set to `auto`.

```jsx
<chakra.table borderSpacing="auto" borderSpacingX="2" borderCollapse="separate">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>
```

| Prop             | CSS Property     | Token Category |
| ---------------- | ---------------- | -------------- |
| `borderSpacingX` | `border-spacing` | `spacing`      |

## Border Spacing Y

Use the `borderSpacingY` prop to set the vertical border-spacing property of a
table. This requires the `borderSpacing` prop to be set to `auto`.

```jsx
<chakra.table borderSpacing="auto" borderSpacingY="2" borderCollapse="separate">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</chakra.table>
```

| Prop             | CSS Property     | Token Category |
| ---------------- | ---------------- | -------------- |
| `borderSpacingY` | `border-spacing` | `spacing`      |

## Caption Side

Use the `captionSide` prop to set the side of the caption of a table.

```jsx
<table>
  <chakra.caption captionSide="bottom">This is a caption</chakra.caption>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>
```

| Prop          | CSS Property   | Token Category |
| ------------- | -------------- | -------------- |
| `captionSide` | `caption-side` | -              |