import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; export const title = "caption-side"; export const description = "Utilities for controlling the alignment of a caption element inside of a table."; ## Examples ### Placing at top of table Use the `caption-top` utility to position a caption element at the top of a table:

{

Table 3.1: Professional wrestlers and their signature moves.
Wrestler	Signature Move(s)
"Stone Cold" Steve Austin	Stone Cold Stunner, Lou Thesz Press
Bret "The Hitman" Hart	The Sharpshooter
Razor Ramon	Razor's Edge, Fallaway Slam

} ```html

Table 3.1: Professional wrestlers and their signature moves.
Wrestler	Signature Move(s)
"Stone Cold" Steve Austin	Stone Cold Stunner, Lou Thesz Press
Bret "The Hitman" Hart	The Sharpshooter
Razor Ramon	Razor's Edge, Fallaway Slam

``` ### Placing at bottom of table Use the `caption-bottom` utility to position a caption element at the bottom of a table:

{

Table 3.1: Professional wrestlers and their signature moves.
Wrestler	Signature Move(s)
"Stone Cold" Steve Austin	Stone Cold Stunner, Lou Thesz Press
Bret "The Hitman" Hart	The Sharpshooter
Razor Ramon	Razor's Edge, Fallaway Slam

} ```html

Table 3.1: Professional wrestlers and their signature moves.
Wrestler	Signature Move(s)
"Stone Cold" Steve Austin	Stone Cold Stunner, Lou Thesz Press
Bret "The Hitman" Hart	The Sharpshooter
Razor Ramon	Razor's Edge, Fallaway Slam

``` ### Responsive design