Caption Side

Control table caption position

Syntax

layout="caption:[value]"

Values

Value	CSS Output	Description
top	caption-side: top	Caption on top
bottom	caption-side: bottom	Caption on bottom

Examples

<caption layout="caption:bottom">Bottom caption</caption>

Preview

Caption Top

layout="caption:top" - Table caption at the top

Table Caption (Top)

Data

Data

View Code

<table style="width: 100%;">
  <caption layout="caption:top" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Top)</caption>
  <tbody>
    <tr>
      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
    </tr>
  </tbody>
</table>

Caption Bottom

layout="caption:bottom" - Table caption at the bottom

Table Caption (Bottom)

Data

Data

View Code

<table style="width: 100%;">
  <caption layout="caption:bottom" space="p:small" visual="text:neutral-600 dark:text:neutral-400">Table Caption (Bottom)</caption>
  <tbody>
    <tr>
      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
      <td space="p:small" visual="bg:primary text:white rounded:small">Data</td>
    </tr>
  </tbody>
</table>