テーブル

テーブルは標準マークアップでサポートされています。以下は、見出し行、複数の通常の行、<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" を使用するには、テーブルを特定の方法で構造化する必要があります。

  • テーブルには 2 つの列のみを含める必要があります。最初の列は定義対象の項目（キー）用で、2 番目の列はキーに関するすべての情報用です。必要に応じて複数行に記述します。2 列という制限があるため、レスポンシブ テーブルは、真に 2 次元の表形式データやチェックボックスベースの機能比較には使用できませんが、参照情報（または表ではなく定義リストで合理的に表現できるその他のデータ）には適しています。
  • キーに関する情報が複数行（タイプと説明など）ある場合は、各行を <p> でラップして強制的に改行します（<br> ではなく）。
  • ヘッダー行には 1 つのセルのみを含める必要があります。<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>
目次に強制的に追加される
テーブル ヘッダー（<th>）内に <h2> または <h3> を配置すると、この表のように、ヘッダーが目次に強制的に挿入されます。テーブルのヘッダー内では、<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>

列の幅を制御する

デフォルトでは、固定レイアウトの表では、テーブルの全体的な幅が各列に均等に分割されます（つまり、3 列の固定レイアウトの表では、各列がテーブルの全体的な幅の 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）の width 属性 width 属性が設定された <col> 子要素を持つ <colgroup> 要素 ブラウザがこの値を計算するため、最後の <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 選択肢のナビゲーション タイプ

垂直線のある表

テーブルの行内の各 <th> と <td> の間に垂直線を表示するには、<table class="vertical-rules">...</table> を使用します。

名前 型 説明
値 文字列 選択肢の値（回答者がフォームを表示したときにラベルとして表示されます）
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>

1 つのテーブル内で複数の色を使用することはできませんが、テーブルの色のクラス名は、上記の他のテーブルのクラス名オプションと組み合わせることができます。

<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">
名前 説明
1 匹の魚 これは One Fish の説明です
2 匹の魚 これは Two Fish の説明です
赤い魚 これは赤い魚の説明です
青い魚 これは青い魚の説明です
その他の魚 その他の魚の説明

偶数行を交互に表示

この例では、テーブルの色の色も green クラスを介してテーブルに適用されています。

<table class="alternating-even-rows green">
名前 説明
1 匹の魚 これは One Fish の説明です
2 匹の魚 これは Two Fish の説明です
赤い魚 これは赤い魚の説明です
青い魚 これは青い魚の説明です
その他の魚 その他の魚の説明