資料表

系統支援使用標準標記建立的表格。以下是含有標題列、多個一般列和標示為 <tr class="alt"> 的列的一般表格,可產生較深的背景,可用做替代標頭。

最終顯示的內容

一個
1.0 2.0 3.0
1.1 2.1 3.1
以下是一些結尾為 .2 的數字!
1.2 2.2 3.2

HTML

<tr>
 <th>One</th>
 <th>Two</th>
 <th>Three</th>
</tr>
<tr>
 <td>1.0</td>
 <td>2.0</td>
 <td>3.0</td>
</tr>
<tr>
 <td>1.1</td>
 <td>2.1</td>
 <td>3.1</td>
</tr>
<tr class="alt">
 <td colspan="3">Here come some numbers that end in .2!</td>
</tr>
<tr>
 <td>1.2</td>
 <td>2.2</td>
 <td>3.2</td>
</tr>
</table>```

回應式表格

DevSite 支援回應式表格,可在較小的螢幕上顯示不同的版面配置。以下是一般參考表:

最終顯示的內容

名稱 類型 說明
value String 選擇的值,作答者在查看表單時會看到這個值做為標籤
navigationType PageNavigationType 選擇的導覽類型

HTML

<table>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>The choice's value, which respondents see as a label when viewing the form</td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

以下是同一個表格,已調整為使用 class="responsive"。如果縮小瀏覽器視窗,畫面會以垂直方式排列,而非水平排列:

最終顯示的內容

參數
valueString
選項的值,作答者在查看表單時會看到這個值做為標籤
navigationTypePageNavigationType
選擇的導覽類型

HTML

<table class="responsive">
  <tbody>
    <tr>
      <th colspan=2>Parameters</th>
    </tr>
    <tr>
      <td><code>value</code></td><td><code>String</code><br>The choice's value, which respondents see as a label when viewing the form</td>
    </tr>
    <tr>
      <td><code>navigationType</code></td><td><code><a href="page-navigation-type.html">PageNavigationType</a></code><br>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

如要使用 class="responsive",資料表必須以特定方式建構:

  • 表格中只能有兩個資料欄:第一個資料欄用於定義的項目 (鍵),第二個資料欄用於該鍵的所有資訊,必要時可分成多行。這項限制是指回應式表格無法用於真正的二維表格資料或以勾號為基礎的功能比較,但非常適合用於參考資訊 (或任何可用定義清單而非表格合理表達的其他資料)。
  • 如果關鍵字有多行資訊 (例如類型和說明),請將每行資訊包在 <p> 中,強制換行 (而非 <br>)。
  • 標題列中只能有一個儲存格。使用 <th colspan="2"> 強制將其跨越兩個資料欄。為了提醒您這項行為,DevSite 會自動隱藏第一個 <th> 之後的所有 <th> (這會刻意讓畫面看起來很破碎)。

這項技巧也適用於非常複雜的資料表,甚至是包含巢狀資料表的資料表:

最終顯示的內容

詳細資料
查詢參數
pageSize
int32
請求的頁面大小。伺服器傳回的貨架數量可能少於要求的數量。如未指定,伺服器會挑選適當的預設值。
pageToken
string
這個符記可識別伺服器應傳回的結果頁面。通常,這是先前對 list 方法的呼叫傳回的 nextPageToken 值。
要求主體
要求主體必須為空白。
授權
至少需要下列其中一個 OAuth 2.0 範圍:
https://www.googleapis.com/auth/drive
https://www.googleapis.com/auth/drive.file
https://www.googleapis.com/auth/drive.appdata
https://www.googleapis.com/auth/drive.apps.readonly
回覆
如果成功,回應主體會包含結構如下的資料:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
書架清單。
nextPageToken
string
用來擷取下一頁結果的符記。在後續對 list 方法的呼叫中,透過 pageToken 欄位傳遞這個值,即可擷取下一頁的結果。

HTML

<table class="details responsive">
  <thead>
    <tr>
      <th colspan="2">Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Query parameters
      </td>
      <td>
        <table class="nested responsive">
          <tbody>
            <tr id="list-pageSize">
              <td>
                <code>pageSize</code>
              </td>
              <td>
                <div><code>int32</code></div>
                <div>Requested page size. Server may return fewer shelves than requested. If unspecified, server will pick an appropriate default.</div>
              </td>
            </tr>
            <tr id="list-pageToken">
              <td>
                <code>pageToken</code>
              </td>
              <td>
                <div><code>string</code></div>
                <div>A token identifying a page of results the server should return. Typically, this is the value of <a href="#list-nextPageToken"><code>nextPageToken</code></a> returned from the previous call to <code>list</code> method.</div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        Request body
      </td>
      <td>
        <div>The request body must be empty.</div>
      </td>
    </tr>
    <tr>
      <td>
        Authorization
      </td>
      <td>
        <devsite-expandable>
          <div class="showalways">Requires at least one of the following OAuth 2.0 scopes:</div>
<pre>
https://www.googleapis.com/auth/drive
https://www.googleapis.com/auth/drive.file
https://www.googleapis.com/auth/drive.appdata
https://www.googleapis.com/auth/drive.apps.readonly
</pre>
        </devsite-expandable>
      </td>
    </tr>
    <tr>
      <td>
        Response
      </td>
      <td>
        <div>If successful, the response body contains data with following structure:</div>
<pre class="prettyprint prettyprinted">
<span class="pun">{</span>
<span class="pln"></span><span class="str">  "shelves"</span><span class="pun">:</span><span class="pln"> </span><a href="#shelf"><span class="typ">Shelf</span><span class="pun">[]</span></a><span class="pun">,</span><span class="pln"></span>
<span class="str">  "nextPageToken"</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"></span>
<span class="pun">}</span>
</pre>
        <table class="nested responsive">
          <tbody>
            <tr id="list-shelves">
              <td>
                <code>shelves</code>
              </td>
              <td>
                <div><a href="#shelf"><code>Shelf[]</code></a></div>
                <div>The list of shelves.</div>
              </td>
            </tr>
            <tr id="list-nextPageToken">
              <td>
                <code>nextPageToken</code>
              </td>
              <td>
                <div><code>string</code></div>
                <div>A token to retrieve next page of results. Pass this value in the <a href="#list-pageToken"><code>pageToken</code></a> field in the subsequent call to the <code>list</code> method to retrieve the next page of results.</div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
強制插入目錄
<h2><h3> 放在資料表標頭 (<th>) 中,會強制將標頭放入內容表格,就像這個表格一樣。在表格標題中,<h2><h3> 的樣式會與一般文字相同,因此讀者無法分辨。

固定版面配置的資料表

如果表格中的內容比表格儲存格寬 (例如程式碼區塊),您可以強制表格儲存格套用溢出捲動功能,而非捲動整個表格,方法是在 <table> 元素中新增固定類別:

<table class="fixed">...</table>

下表包含 fixed 類別,且已在其儲存格中套用溢位處理:

最終顯示的內容

名稱 類型 說明
value String

選擇的值,作答者在查看表單時會看到這個值做為標籤

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.

navigationType PageNavigationType 選擇的導覽類型

HTML

<table class="fixed">
  <colgroup>
    <col width="20%">
    <col width="20%">
    <col>
  </colgroup>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

請比較下表的預設版面配置行為,其中會將溢位內容套用至整個表格:

最終顯示的內容

名稱 類型 說明
value String

選擇的值,作答者在查看表單時會看到這個值做為標籤

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.

navigationType PageNavigationType 選擇的導覽類型

HTML

<table>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

控制欄寬

根據預設,固定版面配置表格會將表格的整體寬度平均分配給各欄 (也就是說,如果表格有三欄,每個欄的寬度會佔表格整體寬度的 33.33%)。

最終顯示的內容

名稱 類型 說明
value String

選擇的值,作答者在查看表單時會看到這個值做為標籤

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.

navigationType PageNavigationType 選擇的導覽類型

HTML

<table class="fixed">
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

如要控制固定版面配置表格中的欄寬,表格第一列的儲存格必須包含下列其中一種內容:

寬度屬性,其值為百分比 (20%) 或像素 (240px) <colgroup> 元素,其中包含已設定 width 屬性的 <col> 子元素 為獲得最佳結果,請勿在最後一個 <col> 元素或最後一個表格儲存格上設定 width,因為瀏覽器會為您計算這個值。

表格儲存格的寬度

最終顯示的內容

名稱 類型 說明
value String

選擇的值,作答者在查看表單時會看到這個值做為標籤

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.

navigationType PageNavigationType 選擇的導覽類型

HTML

<table class="fixed">
  <tbody>
    <tr>
      <th width="20%">Name</th>
      <th width="20%">Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

元素的寬度

最終顯示的內容

名稱 類型 說明
value String

選擇的值,作答者在查看表單時會看到這個值做為標籤

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.

navigationType PageNavigationType 選擇的導覽類型

HTML

<table class="fixed">
  <colgroup>
    <col width="20%">
    <col width="20%">
    <col>
  </colgroup>
  <tbody>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td><code>String</code></td>
      <td>
        <p>The choice's value, which respondents see as a label when viewing the form<p>
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td><code>navigationType</code></td>
      <td><code><a href="page-navigation-type.html">PageNavigationType</a></code></td>
      <td>The choice's navigation type</td>
    </tr>
  </tbody>
</table>

固定版面配置回應式表格

如果您使用 <colgroup><col> 選項設定寬度屬性,也可以將固定版面配置的資料表與回應式資料表結合:

<table class="responsive fixed">...</table>

最終顯示的內容

參數
valueString
選擇的值,受訪者在查看表單時會看到這個值的標籤
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
選擇的導覽類型

HTML

<table class="responsive fixed">
  <colgroup>
    <col width="240px">
    <col>
  </colgroup>
  <tbody>
    <tr>
      <th colspan="2">Parameters</th>
    </tr>
    <tr>
      <td>
        <code>value</code></td><td><code>String</code><br>
        The choice's value, which respondents see as a label when viewing the form
<pre>
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
</pre>
      </td>
    </tr>
    <tr>
      <td>
        <code>navigationType</code>
      </td>
      <td>
        <code><a href="page-navigation-type.html">PageNavigationType</a></code><br>The choice's navigation type
      </td>
    </tr>
  </tbody>
</table>

全寬表格

DevSite 會在頂層表格 (即與網頁標題位於同一層級的表格) 上使用 <table class="full-width">...</table>,支援跨越整個網頁寬度的表格:

名稱 類型 說明
字串 選擇的值,作答者在查看表單時會看到這個值做為標籤
navigationType PageNavigationType 選擇的導覽類型

含有垂直規則的表格

您可以使用 <table class="vertical-rules">...</table>,在表格列的每個 <th><td> 之間顯示垂直規則:

名稱 類型 說明
字串 選擇的值,作答者在查看表單時會看到這個值做為標籤
navigationType PageNavigationType 選擇的導覽類型

資料欄中的文字

您可以使用 <table class="columns">...</table> 將文字排列在欄中,並從 <table> 移除所有樣式。這通常用於排列長而狹窄的清單。

auto
break
case
char
const
continue
default
do
double
else
enum
extern
<table class="columns">
  <tr>
    <td>
      <code>auto</code><br />
      <code>break</code><br />
      <code>case</code><br />
      <code>char</code>
    </td>
    <td>
      <code>const</code><br />
      <code>continue</code><br />
      <code>default</code><br />
      <code>do</code>
    </td>
    <td>
      <code>double</code><br />
      <code>else</code><br />
      <code>enum</code><br />
      <code>extern</code>
    </td>
  </tr>
</table>

表格顏色

標準表格會以上述顏色標示,您也可以使用 bluecyangreenorangepinkpurple 等類別,為表格著色。

<table class="blue">...</table>

系統不支援單一資料表內有多種顏色,但資料表顏色類別名稱可與上述其他資料表類別名稱選項搭配使用。

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
藍色
key type
關於 key 的部分資訊。
青色
key type
關於 key 的部分資訊。
綠色
key type
關於 key 的部分資訊。
Orange
key type
關於 key 的部分資訊。
粉紅色
key type
關於 key 的部分資訊。
紫色
key type
關於 key 的部分資訊。

交替列顏色

如要在表格中交替列背景顏色,請將 alternating-odd-rowsalternating-even-rows 類別新增至 <table> 元素。

交替奇數列

<table class="alternating-odd-rows">
名稱 說明
一尾魚 這是 One Fish 的說明
兩條魚 這是 Two Fish 的說明
紅魚 這是 Red Fish 的說明
藍魚 這是 Blue Fish 的說明
其他魚類 這是「其他魚類」的說明

交替偶數列

在本例中,系統也會透過 green 類別,將表格顏色套用至表格。

<table class="alternating-even-rows green">
名稱 說明
一尾魚 這是 One Fish 的說明
兩條魚 這是 Two Fish 的說明
紅魚 這是 Red Fish 的說明
藍魚 這是 Blue Fish 的說明
其他魚類 這是「其他魚類」的說明