Tables
How to use the Lotus Docs table shortcode to render great looking markdown tables
The table
shortcode enables Lotus Docs to take advantage of Bootstrap’s opt-in table styling.
Regular Tables
By default Lotus Docs renders regular Markdown tables with some very basic styling:
| Tables | Are | Cool |
|----------|:-------------:|------:|
| col 1 is | left-aligned | $1600 |
| col 2 is | centered | $12 |
| col 3 is | right-aligned | $1 |
Result:
Tables | Are | Cool |
---|---|---|
col 1 is | left-aligned | $1600 |
col 2 is | centered | $12 |
col 3 is | right-aligned | $1 |
Shortcode Tables
The the table shortcode allows you to implement a number of Bootstrap’s table styling classes. The table
shortcode without any options will render a basic bordered table with a borderless floating table head:
{{< table >}}
| Animal | Sounds | Legs |
|---------|--------|-----|
| `Cat` | Meow | 4 |
| `Dog` | Woof | 4 |
| `Cricket` | Chirp | 6 |
{{< /table >}}
Animal | Sounds | Legs |
---|---|---|
Cat |
Meow | 4 |
Dog |
Woof | 4 |
Cricket |
Chirp | 6 |
Since the table
shortcode works by implementing Bootstrap’s opt-in table styling, not all Bootstrap’s table styles are compatible with Lotus Docs. All compatible options are documented on this page.
Striped Rows
Use the table-striped
option to add zebra-striping to the table rows.
{{< table "table-striped" >}}
...
..
{{< /table >}}
Parameter | Default Value | Description |
---|---|---|
google_fonts |
N/A | An array of Google fonts and sizes to load. e.g.google_fonts = [["Poppins", "300, 400, 600, 700"],["Source Code Pro", "500, 700"]] This will load the Google Poppins and Source Code Pro fonts in the specified sizes. |
sans_serif_font |
System Font | Set the Sans Serif font. e.g. "Poppins" |
secondary_font |
System Font | Set the Secondary font. e.g. "Poppins" |
Striped Columns
Use the table-striped-columns
option to add zebra-striping to the table columns.
{{< table "table-striped-columns" >}}
...
..
{{< /table >}}
Parameter | Default Value | Description |
---|---|---|
google_fonts |
N/A | An array of Google fonts and sizes to load. e.g.google_fonts = [["Poppins", "300, 400, 600, 700"],["Source Code Pro", "500, 700"]] This will load the Google Poppins and Source Code Pro fonts in the specified sizes. |
sans_serif_font |
System Font | Set the Sans Serif font. e.g. "Poppins" |
secondary_font |
System Font | Set the Secondary font. e.g. "Poppins" |
Hoverable Rows
Use the table-hover
option to enable a hover state on the table rows.
{{< table "table-hover" >}}
...
..
{{< /table >}}
Parameter | Default Value | Description |
---|---|---|
google_fonts |
N/A | An array of Google fonts and sizes to load. e.g.google_fonts = [["Poppins", "300, 400, 600, 700"],["Source Code Pro", "500, 700"]] This will load the Google Poppins and Source Code Pro fonts in the specified sizes. |
sans_serif_font |
System Font | Set the Sans Serif font. e.g. "Poppins" |
secondary_font |
System Font | Set the Secondary font. e.g. "Poppins" |
Tables without borders
Use the table-borderless
option a table without borders.
{{< table "table-borderless" >}}
...
..
{{< /table >}}
Parameter | Default Value | Description |
---|---|---|
google_fonts |
N/A | An array of Google fonts and sizes to load. e.g.google_fonts = [["Poppins", "300, 400, 600, 700"],["Source Code Pro", "500, 700"]] This will load the Google Poppins and Source Code Pro fonts in the specified sizes. |
sans_serif_font |
System Font | Set the Sans Serif font. e.g. "Poppins" |
secondary_font |
System Font | Set the Secondary font. e.g. "Poppins" |
Small Tables
Add table-sm
or table-xs
to make any table more compact by reducing the cell padding.
Parameter | Default Value | Description |
---|---|---|
google_fonts |
N/A | An array of Google fonts and sizes to load. e.g.google_fonts = [["Poppins", "300, 400, 600, 700"],["Source Code Pro", "500, 700"]] This will load the Google Poppins and Source Code Pro fonts in the specified sizes. |
sans_serif_font |
System Font | Set the Sans Serif font. e.g. "Poppins" |
secondary_font |
System Font | Set the Secondary font. e.g. "Poppins" |
Parameter | Default Value | Description |
---|---|---|
google_fonts |
N/A | An array of Google fonts and sizes to load. e.g.google_fonts = [["Poppins", "300, 400, 600, 700"],["Source Code Pro", "500, 700"]] This will load the Google Poppins and Source Code Pro fonts in the specified sizes. |
sans_serif_font |
System Font | Set the Sans Serif font. e.g. "Poppins" |
secondary_font |
System Font | Set the Secondary font. e.g. "Poppins" |
Responsive Tables
Add the table-responsive
option to make a table responsive:
Animal | Sounds | Legs |
---|---|---|
Cat |
Meow | 4 |
Dog |
Woof | 4 |
Cricket |
Chirp | 6 |
Combining Table Options
Combine table
shortcode options to create your desired effect:
{{< table "table-striped table-sm table-borderless" >}}
...
..
{{< /table >}}
Parameter | Default Value | Description |
---|---|---|
google_fonts |
N/A | An array of Google fonts and sizes to load. e.g.google_fonts = [["Poppins", "300, 400, 600, 700"],["Source Code Pro", "500, 700"]] This will load the Google Poppins and Source Code Pro fonts in the specified sizes. |
sans_serif_font |
System Font | Set the Sans Serif font. e.g. "Poppins" |
secondary_font |
System Font | Set the Secondary font. e.g. "Poppins" |
Last updated 26 Jul 2024, 13:46 +0800 .