表格

2024年9月4日 6 分钟阅读 Modules

在本指南中，你将学习如何配置和创建表格。

赞助

前置条件

你需要升级 Hugo 到 v0.134.0 或后续版本，并启用 markup.goldmark.parser.attribute.block。

hugo.toml

1[markup]
2  [markup.goldmark]
3    [markup.goldmark.parser]
4      [markup.goldmark.parser.attribute]
5        block = true

hugo.yaml

1markup:
2  goldmark:
3    parser:
4      attribute:
5        block: true

hugo.json

 1{
 2   "markup": {
 3      "goldmark": {
 4         "parser": {
 5            "attribute": {
 6               "block": true
 7            }
 8         }
 9      }
10   }
11}

站点参数

`align`

名称	上下文	类型	必填	默认值	版本
`align`	`hb.tables`	`string`	-	-	-

垂直对齐。

可选项：top, middle, bottom。

`bordered`

名称	上下文	类型	必填	默认值	版本
`bordered`	`hb.tables`	`boolean`	-	`true`	-

是否在全局内启用边框。

`border_style`

名称	上下文	类型	必填	默认值	版本
`border_style`	`hb.tables`	`string`	-	-	-

边框样式。

可选项：danger, dark, light, info, primary, secondary, success, warning。

`group_divider`

名称	上下文	类型	必填	默认值	版本
`group_divider`	`hb.tables`	`boolean`	-	`false`	-

是否在表格组之间添加更厚的深色边框。

`hover`

名称	上下文	类型	必填	默认值	版本
`hover`	`hb.tables`	`boolean`	-	`true`	-

是否在表格上启用悬停状态。

`striped`

名称	上下文	类型	必填	默认值	版本
`striped`	`hb.tables`	`boolean`	-	`true`	-

是否在表格行上添加斑马纹。

`striped_columns`

名称	上下文	类型	必填	默认值	版本
`striped_columns`	`hb.tables`	`boolean`	-	`false`	-

是否在表格列上添加斑马纹。

`style`

名称	上下文	类型	必填	默认值	版本
`style`	`hb.tables`	`string`	-	-	-

表格样式。

可选项：danger, dark, light, info, primary, secondary, success, warning。

`thead_style`

名称	上下文	类型	必填	默认值	版本
`thead_style`	`hb.tables`	`string`	-	-	-

表头样式。

可选项：danger, dark, light, info, primary, secondary, success, warning。

站点参数示例

hugo.toml

 1[params]
 2  [params.hb]
 3    [params.hb.tables]
 4      align = ''
 5      border_style = ''
 6      bordered = true
 7      group_divider = false
 8      hover = true
 9      striped = true
10      striped_columns = false
11      style = ''
12      thead_style = ''

hugo.yaml

 1params:
 2  hb:
 3    tables:
 4      align: ""
 5      border_style: ""
 6      bordered: true
 7      group_divider: false
 8      hover: true
 9      striped: true
10      striped_columns: false
11      style: ""
12      thead_style: ""

hugo.json

 1{
 2   "params": {
 3      "hb": {
 4         "tables": {
 5            "align": "",
 6            "border_style": "",
 7            "bordered": true,
 8            "group_divider": false,
 9            "hover": true,
10            "striped": true,
11            "striped_columns": false,
12            "style": "",
13            "thead_style": ""
14         }
15      }
16   }
17}

表格属性

`_align`

名称	上下文	类型	必填	默认值	版本
`_align`	`-`	`string`	-	`hb.tables.align`	-

垂直对齐。

可选项：top, middle, bottom。

`_borderless`

名称	上下文	类型	必填	默认值	版本
`_borderless`	`-`	`boolean`	-	`false`	-

是否去除边框。

`_bordered`

名称	上下文	类型	必填	默认值	版本
`_bordered`	`-`	`boolean`	-	`hb.tables.bordered`	-

是否启用边框。

`_border_style`

名称	上下文	类型	必填	默认值	版本
`_border_style`	`-`	`string`	-	-	-

边框样式。

可选项：danger, dark, light, info, primary, secondary, success, warning。

`_caption`

名称	上下文	类型	必填	默认值	版本
`_caption`	`-`	`string`	-	-	-

表格说明。

`_group_divider`

名称	上下文	类型	必填	默认值	版本
`_group_divider`	`-`	`boolean`	-	`hb.tables.group_divider`	-

是否在表格组之间添加更厚的深色边框。

`_hover`

名称	上下文	类型	必填	默认值	版本
`_hover`	`-`	`boolean`	-	`hb.tables.hover`	-

是否在表格上启用悬停状态。

`_striped`

名称	上下文	类型	必填	默认值	版本
`_striped`	`-`	`boolean`	-	`hb.tables.striped`	-

是否在表格行上添加斑马纹。

`_striped_columns`

名称	上下文	类型	必填	默认值	版本
`_striped_columns`	`-`	`boolean`	-	`hb.tables.striped_columns`	-

是否在表格列上添加斑马纹。

`_size`

名称	上下文	类型	必填	默认值	版本
`_size`	`-`	`string`	-	-	-

表格尺寸。

可选项：sm。

`_style`

名称	上下文	类型	必填	默认值	版本
`_style`	`-`	`string`	-	-	-

表格样式。

可选项：danger, dark, light, info, primary, secondary, success, warning。

`_thead`

名称	上下文	类型	必填	默认值	版本
`_thead`	`-`	`boolean`	-	`true`	`v0.15.1`

是否显示表头。

`_thead_style`

名称	上下文	类型	必填	默认值	版本
`_thead_style`	`-`	`string`	-	-	-

表头样式。

可选项：danger, dark, light, info, primary, secondary, success, warning。

示例

默认表格

样式取决于默认配置。

源码

1| Default Table |
2| --- |
3| Foo |
4| Bar |

结果

Default Table
Foo
Bar

表格水平对齐

源码

1| Left | Center | Right |
2| :- | :-: | -: |
3| 1 | 2 | 3 |
4| 1 | 2 | 3 |
5| 1 | 2 | 3 |

结果

Left	Center	Right
1	2	3
1	2	3
1	2	3

表格垂直对齐

源码

1| Heading 1 | Heading 2 |
2| --- | --- |
3| `top` | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
4{_align=top}

结果

Heading 1	Heading 2
`top`	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

源码

1| Heading 1 | Heading 2 |
2| --- | --- |
3| `middle` | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
4{_align=middle}

结果

Heading 1	Heading 2
`middle`	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

源码

1| Heading 1 | Heading 2 |
2| --- | --- |
3| `bottom` | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. |
4{_align=bottom}

结果

Heading 1	Heading 2
`bottom`	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

带有说明的表格

源码

1| Name | Age | Role |
2| --- | :-: | :-: |
3| Foo | 35 | Leader |
4| Bar | 23 | Developer |
5{_caption="Members"}

结果

Members
Name	Age	Role
Foo	35	Leader
Bar	23	Developer

表格样式

源码

1| Primary Table |
2| --- |
3| Foo |
4| Bar |
5{_style=primary}

结果

Primary Table
Foo
Bar

源码

1| Danger Table |
2| --- |
3| Foo |
4| Bar |
5{_style=danger}

结果

Danger Table
Foo
Bar

源码

1| Dark Table |
2| --- |
3| Foo |
4| Bar |
5{_style=dark}

结果

Dark Table
Foo
Bar

带有边框和边框样式的表格

源码

1| Primary Bordered Table |
2| --- |
3| Foo |
4| Bar |
5{_border_style=primary}

结果

Primary Bordered Table
Foo
Bar

源码

1| Danger Bordered Table |
2| --- |
3| Foo |
4| Bar |
5{_border_style=danger}

结果

Danger Bordered Table
Foo
Bar

无边框表格

源码

1| Borderless Table |
2| --- |
3| Foo |
4| Bar |
5{_borderless=true}

结果

Borderless Table
Foo
Bar

小号表格

源码

1| Small Table |
2| --- |
3| Foo |
4| Bar |
5{_size=sm}

结果

Small Table
Foo
Bar

表头样式

源码

1| Primary Header |
2| --- |
3| Foo |
4| Bar |
5{_thead_style=primary}

结果

Primary Header
Foo
Bar

源码

1| Danger Header |
2| --- |
3| Foo |
4| Bar |
5{_thead_style=danger}

结果

Danger Header
Foo
Bar

源码

1| Dark Header |
2| --- |
3| Foo |
4| Bar |
5{_thead_style=dark}

结果

Dark Header
Foo
Bar

无表头表格

源码

1| | | |
2|-|-|-|
3| 1 | 1 | 1 |
4| 2 | 2 | 2 |
5| 3 | 3 | 3 |
6| 4 | 4 | 4 |
7{_thead=false}

结果

1	1	1
2	2	2
3	3	3
4	4	4

查看源码编辑页面历史

2024年10月4日星期五 2024年9月4日星期三

短代码

浏览用户手册

表格

前置条件

站点参数

align

bordered

border_style

group_divider

hover

striped

striped_columns

style

thead_style

站点参数示例

表格属性

_align

_borderless

_bordered

_border_style

_caption

_group_divider

_hover

_striped

_striped_columns

_size

_style

_thead

_thead_style

示例

默认表格

表格水平对齐

表格垂直对齐

带有说明的表格

表格样式

带有边框和边框样式的表格

无边框表格

小号表格

表头样式

无表头表格

`align`

`bordered`

`border_style`

`group_divider`

`hover`

`striped`

`striped_columns`

`style`

`thead_style`

`_align`

`_borderless`

`_bordered`

`_border_style`

`_caption`

`_group_divider`

`_hover`

`_striped`

`_striped_columns`

`_size`

`_style`

`_thead`

`_thead_style`