Table Shortcode

The table shortcode allows you to create styled HTML tables within your Hugo content.
It supports custom headers, optional captions, and automatic styling for light/dark modes.

Usage

Basic Table

1
2
3
4
5
{{< table headers="Name|Age|City" caption="My Table" >}}
John|25|New York
Jane|30|Los Angeles
Bob|28|Chicago
{{< /table >}}

Table Without Caption

1
2
3
4
5
{{< table headers="Product|Price|Stock" >}}
Laptop|1200|10
Monitor|300|15
Keyboard|50|50
{{< /table >}}

Parameters

**Table:** Table Shortcode Parameters
Parameter	Required	Default	Description
headers	No	-	Pipe-separated list of column headers (e.g., "Name।Age।City")
caption	No	-	Optional caption displayed below the table
Inner content	Yes	-	Rows of table data separated by newlines, cells separated by `।`

Note: Using id generated from the caption can conflict if multiple tables share the same caption in a single page.

Examples

Table With Mixed Content

**Table:** Team Members
Name	Occupation	Country
Alice	Engineer	USA
Bob	Designer	Canada
Charlie	Manager	UK

Table With Empty Cells

**Table:** Inventory
Item	Price	Stock
Laptop	1200	10
Monitor	*	15
Keyboard	50	*