表格

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年9月18日星期三 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`