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

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 . history