如何在Hangout Chat嵌入表格及配置Chat Bot卡片内表格与水平分割

一、3列3行表格的JSON结构 #

Hangout Chat的Cards支持通过table类型的widget创建格式化表格，下面是你需要的**3列3行（含表头）**的完整JSON示例：

{
  "cardsV2": [
    {
      "cardId": "simple-table-card",
      "card": {
        "header": {
          "title": "3列3行示例表格"
        },
        "sections": [
          {
            "widgets": [
              {
                "table": {
                  "headerRows": [
                    {
                      "cells": [
                        { "text": "表头列1" },
                        { "text": "表头列2" },
                        { "text": "表头列3" }
                      ]
                    }
                  ],
                  "rows": [
                    {
                      "cells": [
                        { "text": "行1列1" },
                        { "text": "行1列2" },
                        { "text": "行1列3" }
                      ]
                    },
                    {
                      "cells": [
                        { "text": "行2列1" },
                        { "text": "行2列2" },
                        { "text": "行2列3" }
                      ]
                    }
                  ],
                  "columnProperties": [
                    { "horizontalAlignment": "CENTER" },
                    { "horizontalAlignment": "CENTER" },
                    { "horizontalAlignment": "CENTER" }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

关键部分说明： #

• headerRows：定义表格的表头行，这里设置了1行表头，和下方2行数据行共同组成3行结构
• rows：表格的主体数据行，可根据需求增减行数
• columnProperties：可选配置，用来设置每列的对齐方式（左/中/右），让表格样式更规整

如果不需要表头，直接删除headerRows字段即可，rows中的内容将作为全部数据行。

二、水平分割卡片展示小型表格 #

想要通过水平分割卡片来放置小型表格，你可以使用columns类型的widget，将卡片区域划分为多个水平列，把表格放在目标列中，实现视觉上的水平分割效果。示例如下：

{
  "cardsV2": [
    {
      "cardId": "horizontal-split-table-card",
      "card": {
        "header": {
          "title": "水平分割布局的表格"
        },
        "sections": [
          {
            "widgets": [
              {
                "columns": [
                  {
                    "column": {
                      "horizontalAlignment": "CENTER",
                      "widgets": [
                        {
                          "textParagraph": { "text": "*左侧辅助说明*" }
                        }
                      ]
                    }
                  },
                  {
                    "column": {
                      "horizontalAlignment": "CENTER",
                      "widgets": [
                        {
                          "table": {
                            "headerRows": [
                              { "cells": [{ "text": "列A" }, { "text": "列B" }] }
                            ],
                            "rows": [
                              { "cells": [{ "text": "1" }, { "text": "2" }] },
                              { "cells": [{ "text": "3" }, { "text": "4" }] }
                            ]
                          }
                        }
                      ]
                    }
                  },
                  {
                    "column": {
                      "horizontalAlignment": "CENTER",
                      "widgets": [
                        {
                          "textParagraph": { "text": "*右侧辅助说明*" }
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  ]
}

实现思路： #

• 通过columns将卡片的一个section拆分为多个水平列，中间列放置小型表格，左右列可添加说明文字或空白占位，实现水平分割的视觉效果
• 如果只需要突出表格，也可以只保留中间列的表格，左右列留空（建议添加空白文本组件让布局更协调）

内容的提问来源于stack exchange，提问作者Divam Singh