表

表格支持使用标准标记。下面是一个典型的表格，其中包含标题行、多个常规行和标记为 <tr class="alt"> 的行，后者会产生较深的背景，可用作备用标题。

已渲染

1 2 3
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>

表格颜色

标准表格采用上述颜色，您还可以使用 blue、cyan、green、orange、pink 和 purple 类使用其他几种颜色。

<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 的一些信息。

交替行的颜色

如需在表格中交替行背景颜色，请为 <table> 元素添加 alternating-odd-rows 或 alternating-even-rows 类。

交替奇数行

<table class="alternating-odd-rows">
名称 说明
One Fish 这是 One Fish 的说明
Two Fish 这是对 Two Fish 的说明
Red Fish 这是对红鱼的说明
Blue Fish 这是对 Blue Fish 的说明
其他鱼类 这是对“其他鱼类”的说明

交替偶数行

在此示例中，还通过 green 类将表格颜色中的颜色应用于表格。

<table class="alternating-even-rows green">
名称 说明
One Fish 这是 One Fish 的说明
Two Fish 这是对 Two Fish 的说明
Red Fish 这是对红鱼的说明
Blue Fish 这是对 Blue Fish 的说明
其他鱼类 这是对“其他鱼类”的说明