表格版面、表格版面列及表格版面資料格

線上編輯
表格版面、表格版面列和表格版面資料格會建立一個包含其他視圖的區段，並以可使用 HTML 屬性來配置的類似表格結構來顯示它們。
附註: 這些視圖與 表格 及 服務資料表 視圖不同。
「表格版面」列和「表格版面」資料格沒有任何配置選項。 相反地，您可以使用 colspan 和 rowspan HTML 屬性來指定表格版面資料格視圖在表格版面中的顯示方式。 對於這些視圖，您必須使用與 HTML 表格中相同的結構:
  • 表格版面列視圖放置在「表格版面」視圖內。
  • 表格版面資料格視圖放置在「表格版面」列視圖內。
您可以在 HTML 屬性 內容標籤中指定 HTML 屬性。
附註: 設計程式中這些視圖的佈置不是 WYSIWYG。

配置內容

在 配置下，設定或修改視圖的配置內容。

螢幕大小
在內容名稱旁具有「畫面大小」圖示 螢幕大小圖示 的配置內容，每一個畫面大小可以有不同的值。 如果您未設定值，則畫面大小會繼承下一個較大畫面大小的值作為其預設值。
佈景主題定義
佈景主題定義指定視圖的顏色和樣式，並決定其外觀。 您可以在佈景主題編輯器中預覽視圖的外觀與操作方式。 請參閱 佈景主題。

下表顯示「表格」佈置的外觀配置內容:

表 1. 表格版面的外觀配置內容
外觀配置內容 說明 資料類型
邊框間距 指定資料格之間的間距 (以像素為單位)。 String
邊框收合 為資料格之間的空間指定下列其中一項設定:
  • 分隔: 在資料格之間新增空格。
  • 收合: 儲存格之間沒有空格。
 String

範例

如果要在表格結構中顯示兩個「文字」視圖，請執行下列動作:
  1. 新增表格版面視圖。
  2. 在「表格版面」視圖內插入「表格版面」列視圖。
  3. 在「表格版面」列視圖內插入兩個「表格版面」資料格視圖。
  4. 在每一個「表格版面」資料格視圖中插入一個「文字」視圖。
  5. 選擇性地將 邊框間距 內容設為 25，並將 邊框收合 內容設為 Separate ，以在資料格之間新增空間。
您也可以在「表格版面」視圖中使用多個「表格版面」列和「表格版面」資料格視圖，並使用 colspan 和 rowspan HTML 屬性讓資料格跨越多個直欄或列。 例如：
  1. 新增表格版面視圖。
  2. 在「表格版面」視圖內插入三個「表格版面」列視圖。
  3. 在您於步驟 2 中新增的第一個「表格版面」列視圖內插入三個「表格版面」資料格視圖。
  4. 在您於步驟 2 中新增的第二個「表格佈置」列視圖內插入一個「表格佈置」資料格視圖。
  5. 在您於步驟 2 中新增的第三個「表格版面」列視圖內插入兩個「表格版面」資料格視圖。
  6. 在第一列中第一個資料格的 HTML 屬性 中，新增屬性 rowspan，將它設為 3，並在資料格內插入「交換器」視圖。
  7. 在第一列的第二個資料格內插入「按鈕」視圖。
  8. 在第一列的第三個資料格內插入 QR 碼視圖。
  9. 在第二列資料格的 HTML 屬性 中，新增屬性 colspan，將它設為 2，並在資料格內插入「單一選取」視圖。
  10. 在第三列的第一個資料格內插入「日期選取器」視圖。
  11. 在第三列的第二個資料格內插入「文字」區域視圖。
結果是類似於下列影像的佈置。

方法

如需表格版面、表格版面列及表格版面資料格可用方法的詳細資訊，請參閱 表格版面、 表格版面列或 表格版面資料格 JavaScript API。

其他資源

如需如何建立 Coach 或頁面的相關資訊，請參閱 建置 Coach。
如需標準內容 (一般、 配置、 定位、 可見性及 HTML 屬性) 的相關資訊，請參閱 檢視內容。