備註
你正在建立由 Adaptive Cards 驅動的 Copilot、Teams 或 Outlook 應用場景嗎？ 造訪 Adaptive Card Documentation Hub，這個全新的一站式平台，滿足您所有 Adaptive Card 的需求！ 它擁有你所需的所有資源，包括許多新功能的完整文件，例如響應式版面、圖示、徽章、旋轉木馬、圖表等等！
本頁說明了 表格元素， 提供以表格形式顯示資料的方法。
於 1.5 版本引入
關於無障礙的重要說明： 在結構的 1.3 版本中，我們在 Inputs 上引入 了標籤 屬性以提升可及性。 如果你目標的 主機應用程式 支援 v1.3，建議使用 label 而非 TextBlock ，如下方範例所示。 當大多數 Host 應用程式更新到最新版本後，我們會相應更新樣本。
Table
提供以表格形式顯示資料的方法。
於 1.5 版本引入
數據表屬性
| 房產 | 類型 | 為必填項目 | Description | 版本 |
|---|---|---|---|---|
| type | "Table" |
Yes | 必須是 "Table"。 |
1.5 |
| columns | TableColumnDefinition[] |
否 | 定義表格中的欄位數量、大小等。 | 1.5 |
| 行 | TableRow[] |
否 | 定義表格的行。 | 1.5 |
| firstRowAsHeader | boolean |
不，預設： true |
規定表格的第一列是否應被視為標頭列，並由無障礙軟體以此公告。 | 1.5 |
| showGridLines | boolean |
不，預設： true |
規定是否應顯示格線。 | 1.5 |
| 網格風格 | ContainerStyle? |
不，預設： "default" |
定義了格子的風格。 這個屬性目前只控制格子的顏色。 | 1.5 |
| 水平儲存格內容對齊方式 | HorizontalAlignment? |
否 | 預設控制所有儲存格的內容水平排列方式。 若未指定，則以每格為單位定義水平對齊。 | 1.5 |
| 垂直儲存格內容對齊 | VerticalAlignment? |
否 | 控制所有儲存格的內容預設垂直排列方式。 若未指定，垂直對齊則以每個單元為單位定義。 | 1.5 |
繼承屬性
| 房產 | 類型 | 為必填項目 | Description | 版本 |
|---|---|---|---|---|
| 後備方案 |
Element、FallbackOption |
否 | 描述遇到未知元素或無法滿足該元素或任何孩子需求時該怎麼做。 | 1.2 |
| height | BlockElementHeight |
否 | 指定元素的高度。 | 1.1 |
| separator | boolean |
否 | 當 true時，在元素頂部畫一條分隔線。 |
1.5 |
| 間距 | Spacing |
否 | 控制此元素與前一個元素之間的間距。 | 1.5 |
| 識別碼 | string |
否 | 與該項目相關的唯一識別碼。 | 1.5 |
| 是可見的 | boolean |
不，預設： true |
若 false，則該項目將從視覺樹中移除。 |
1.2 |
| 要求 | Dictionary<string> |
否 | 一系列鍵值對，表示該項目所需的功能及其相應的最低版本。 當功能缺失或版本不足時，會觸發備援。 | 1.2 |
Example
基本資料表範例（JSON）
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "Table",
"gridStyle": "accent",
"firstRowAsHeaders": true,
"columns": [
{
"width": 1
},
{
"width": 1
},
{
"width": 3
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Name",
"wrap": true,
"weight": "Bolder"
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Type",
"wrap": true,
"weight": "Bolder"
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Description",
"wrap": true,
"weight": "Bolder"
}
]
}
],
"style": "accent"
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "columns",
"wrap": true
}
]
},
{
"type": "TableCell",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "ColumnDefinition[]",
"wrap": true
}
]
},
{
"type": "TableCell",
"style": "accent",
"items": [
{
"type": "TextBlock",
"text": "Defines the table's columns (number of columns, and column sizes).",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "rows",
"wrap": true
}
]
},
{
"type": "TableCell",
"style": "accent",
"items": [
{
"type": "TextBlock",
"text": "TableRow[]",
"wrap": true
}
]
},
{
"type": "TableCell",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Defines the rows of the Table, each being a collection of cells. Rows are not required, which allows empty Tables to be generated via templating without breaking the rendering of the whole card.",
"wrap": true
}
]
}
]
}
]
},
{
"type": "Table",
"gridStyle": "accent",
"firstRowAsHeaders": true,
"showGridLines" : false,
"columns": [
{
"width": 1
},
{
"width": 1
},
{
"width": 3
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Name",
"wrap": true,
"weight": "Bolder"
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Type",
"wrap": true,
"weight": "Bolder"
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Description",
"wrap": true,
"weight": "Bolder"
}
]
}
],
"style": "accent"
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "columns",
"wrap": true
}
]
},
{
"type": "TableCell",
"style": "warning",
"items": [
{
"type": "TextBlock",
"text": "ColumnDefinition[]",
"wrap": true
}
]
},
{
"type": "TableCell",
"style": "accent",
"items": [
{
"type": "TextBlock",
"text": "Defines the table's columns (number of columns, and column sizes).",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"style": "good",
"items": [
{
"type": "TextBlock",
"text": "rows",
"wrap": true
}
]
},
{
"type": "TableCell",
"style": "accent",
"items": [
{
"type": "TextBlock",
"text": "TableRow[]",
"wrap": true
}
]
},
{
"type": "TableCell",
"style": "attention",
"items": [
{
"type": "TextBlock",
"text": "Defines the rows of the Table, each being a collection of cells. Rows are not required, which allows empty Tables to be generated via templating without breaking the rendering of the whole card.",
"wrap": true
}
]
}
]
}
],
"showGridLines": false
}
]
}
屬性
columns
定義表格中的欄位數量、大小等。
-
類型：
TableColumnDefinition[] - 必要條件：不
-
允許的值：
TableColumnDefinition
rows
定義了表格的行。
-
類型：
TableRow[] - 必要條件：不
-
允許的值：
TableRow
firstRowAsHeader
規定表格的第一列是否應被視為標頭列，並由無障礙軟體以此公告。
-
類型：
boolean -
必修條件：否，預設：
true
顯示格線
規定是否應顯示格線。
-
類型：
boolean -
必修條件：否，預設：
true
showGridLines 範例（JSON）
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "Table with gridlines",
"wrap": true,
"style": "heading"
},
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "showGridLines value",
"wrap": true
}
],
"style": "accent"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Behavior",
"wrap": true
}
],
"style": "accent"
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "true",
"wrap": true
}
],
"style": "accent"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Cells are separated by 1px width gridlines",
"wrap": true
}
],
"style": "accent"
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "false",
"wrap": true
}
],
"style": "accent"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Cells are separated by the cell spacing value configued in hostconfig",
"wrap": true
}
],
"style": "accent"
}
]
}
]
},
{
"type": "TextBlock",
"text": "Table without gridlines",
"wrap": true,
"style": "heading"
},
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "showGridLines value",
"wrap": true
}
],
"style": "accent"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Behavior",
"wrap": true
}
],
"style": "accent"
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "true",
"wrap": true
}
],
"style": "accent"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Cells are separated by 1px width gridlines",
"wrap": true
}
],
"style": "accent"
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "false",
"wrap": true
}
],
"style": "accent"
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Cells are separated by the cell spacing value configued in hostconfig",
"wrap": true
}
],
"style": "accent"
}
]
}
],
"showGridLines": false
}
]
}
網格樣式
定義了格子的風格。 這個屬性目前只控制格子的顏色。
-
類型：
ContainerStyle? -
必修條件：否，預設：
"default" -
允許的值：
"default""emphasis"-
"good"（於版本 1.2 新增） -
"attention"（於版本 1.2 新增） -
"warning"（於版本 1.2 新增） -
"accent"（於版本 1.2 新增）
gridStyle 範例（JSON）
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "GridStyle sets the color of the gridlines to the corresponding border color defined in host config",
"wrap": true,
"weight": "Bolder"
},
{
"type": "Table",
"verticalCellContentAlignment": "Center",
"columns": [
{
"width": 1
},
{
"width": 3
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "gridStyle Value",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Sample table",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Good",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
}
],
"firstRowAsHeaders": false,
"gridStyle": "good"
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Warning",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
}
],
"firstRowAsHeaders": false,
"gridStyle": "warning"
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Attention",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
}
],
"firstRowAsHeaders": false,
"gridStyle": "attention"
}
]
}
]
}
],
"showGridLines": false,
"firstRowAsHeaders": true
}
]
}
水平單元格對齊方式
預設控制所有儲存格的內容水平排列方式。 若未指定，則以每格為單位定義水平對齊。
-
類型：
HorizontalAlignment? - 必要條件：不
-
允許的值：
"left""center""right"
horizontalCellContentAlignment 範例（JSON）
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "You can configure the horizontal alignment of table content with HorizontalCellContentAlignement",
"wrap": true,
"weight": "Bolder"
},
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 3
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Left",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
}
],
"firstRowAsHeaders": false,
"horizontalCellContentAlignment": "Left"
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Center",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
}
],
"firstRowAsHeaders": false,
"horizontalCellContentAlignment": "Center"
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Right",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Data",
"wrap": true
}
]
}
]
}
],
"firstRowAsHeaders": false,
"horizontalCellContentAlignment": "Right"
}
]
}
]
}
],
"showGridLines": false,
"firstRowAsHeaders": false,
"verticalCellContentAlignment": "Center"
}
]
}
垂直儲存格內容對齊
控制所有儲存格的內容預設垂直排列方式。 若未指定，垂直對齊則以每個單元為單位定義。
-
類型：
VerticalAlignment? - 必要條件：不
-
允許的值：
"top""center""bottom"
verticalCellContentAlignment 範例（JSON）
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"body": [
{
"type": "TextBlock",
"text": "You can configure the vertical alignment of table content with VerticalCellContentAlignement",
"wrap": true,
"weight": "Bolder"
},
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 3
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Top",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A little bit of text.",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. ",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A little bit of text.",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. ",
"wrap": true
}
]
}
]
}
],
"firstRowAsHeaders": false,
"verticalCellContentAlignment": "Top"
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Center",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A little bit of text.",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. ",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A little bit of text.",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. ",
"wrap": true
}
]
}
]
}
],
"firstRowAsHeaders": false,
"verticalCellContentAlignment": "Center"
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "Bottom",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "Table",
"columns": [
{
"width": 1
},
{
"width": 1
}
],
"rows": [
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A little bit of text.",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. ",
"wrap": true
}
]
}
]
},
{
"type": "TableRow",
"cells": [
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A little bit of text.",
"wrap": true
}
]
},
{
"type": "TableCell",
"items": [
{
"type": "TextBlock",
"text": "A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. A lot of text. ",
"wrap": true
}
]
}
]
}
],
"firstRowAsHeaders": false,
"verticalCellContentAlignment": "Bottom"
}
]
}
]
}
],
"showGridLines": false,
"firstRowAsHeaders": false,
"verticalCellContentAlignment": "Center"
}
]
}
後備方案
描述遇到未知元素或無法滿足該元素或任何兒童需求時該怎麼做。
-
類型：
Element，FallbackOption - 版本：1.2
- 必要條件：不
-
允許的值：
-
ActionSet、ColumnSet、Container、FactSet、Image、ImageSet、Input.ChoiceSet、Input.Date、Input.Number、Input.Text、Input.Time、Input.Toggle、Media、RichTextBlock、Table、TextBlock -
"drop"：當遇到未知元素時，此元素會立即被丟棄。 未知元素無法上升到更高層級。
-
height
指定元素的高度。
-
類型：
BlockElementHeight - 版本：1.1
- 必要條件：不
-
允許的值：
-
"auto"容器的高度將由其內容物的高度決定。 -
"stretch"：容器會將其高度拉伸至母容器剩餘的可用高度。
-
分隔符號
當 true時，在元素頂部畫一條分隔線。
-
類型：
boolean - 必要條件：不
間距
控制此元素與前一個元素之間的間距。
-
類型：
Spacing - 必要條件：不
-
允許的值：
-
"default"、"none"、"small"、"medium"、"large"、"extraLarge"、"padding"
-
識別碼
與該項目相關的唯一識別碼。
-
類型：
string - 必要條件：不
是可見的
若 false，則該項目將從視覺樹中移除。
-
類型：
boolean - 版本：1.2
-
必修條件：否，預設：
true
要求
一系列鍵值對，表示該項目所需的功能及其相應的最低版本。 當功能缺失或版本不足時，會觸發備援。
-
類型：
Dictionary<string> - 版本：1.2
- 必要條件：不