Таблиці

Таблиці підтримуються стандартною розміткою. Ось типова таблиця з рядком заголовка, кількома звичайними рядками та рядком, позначеним як <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" . Якщо звузити вікно браузера, воно розташовуватиметься вертикально, а не горизонтально:

Візуалізовано

Параметри
value String
Значення вибору, яке респонденти бачать як позначку під час перегляду форми
navigationType PageNavigationType
Вибраний тип навігації

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> після першого (який навмисно виглядає дуже зламаним).

Ця техніка також працює для дуже складних таблиць, навіть тих, які містять вкладені таблиці:

Візуалізовано

Подробиці
Параметри запиту
pageSize
int32
Запитуваний розмір сторінки. Сервер може повернути менше полиць, ніж запитувано. Якщо не вказано, сервер вибере відповідне значення за умовчанням.
pageToken
string
Маркер, що ідентифікує сторінку результатів, яку має повернути сервер. Як правило, це значення nextPageToken яке повертається попереднім викликом методу list .
Тіло запиту
Тіло запиту має бути порожнім.
Авторизація
Потрібна принаймні одна з таких областей 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
Маркер для отримання наступної сторінки результатів. Передайте це значення в поле pageToken під час наступного виклику методу list , щоб отримати наступну сторінку результатів.

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> з дочірніми елементами <col> , для яких установлено атрибути width . Для досягнення найкращих результатів не встановлюйте width останнього елемента <col> або останньої клітинки таблиці, оскільки браузер обчислює це значення для вас.

Ширина клітинок таблиці

Візуалізовано

Ім'я Тип опис
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>

Візуалізовано

Параметри
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="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> за допомогою <table class="columns">...</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 .
Помаранчевий
key type
Трохи інформації про key .
Рожевий
key type
Деяка інформація про key .
Фіолетовий
key type
Деяка інформація про key .

Чергуйте кольори рядків

Щоб чергувати фонові кольори рядків у вашій таблиці, додайте клас alternating-odd-rows або alternating-even-rows до елемента <table> .

Чергування непарних рядів 

<table class="alternating-odd-rows">
Ім'я опис
Одна риба Це опис One Fish
Дві Риби Це опис Двох рибок
Червона риба Це опис червоної риби
Синя риба Це опис Blue Fish
Інша риба Це опис іншої риби

Чергування парних рядів

У цьому прикладі колір із кольорів таблиці також застосовано до таблиці через green клас. 

<table class="alternating-even-rows green">
Ім'я опис
Одна риба Це опис One Fish
Дві Риби Це опис Двох Рибок
Червона риба Це опис червоної риби
Синя риба Це опис Blue Fish
Інша риба Це опис іншої риби