Таблицы

Таблицы поддерживаются стандартной разметкой. Вот типичная таблица со строкой заголовка, несколькими обычными строками и строкой, помеченной как <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> в таблицах верхнего уровня (т. е. таблицах на том же иерархическом уровне, что и заголовки страниц):

Имя Тип Описание
ценить Нить Ценность выбора, которую респонденты видят в виде ярлыка при просмотре формы.
Тип навигации PageNavigationType Тип навигации по выбору

Таблицы с вертикальными линейками

Вы можете отображать вертикальные правила между каждым <th> и <td> в строке таблицы, используя <table class="vertical-rules">...</table> :

Имя Тип Описание
ценить Нить Ценность выбора, которую респонденты видят в виде ярлыка при просмотре формы.
Тип навигации 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">
Имя Описание
Одна рыба Это описание одной рыбы
Две рыбы Это описание для Две рыбы
Красная рыба Это описание красной рыбы.
Синяя рыба Это описание Голубой рыбы.
Другая рыба Это описание Другой рыбы

Чередование четных рядов

В этом примере к таблице также применяется цвет из цветов таблицы через класс green . 

<table class="alternating-even-rows green">
Имя Описание
Одна рыба Это описание одной рыбы
Две рыбы Это описание для Две рыбы
Красная рыба Это описание красной рыбы.
Синяя рыба Это описание Голубой рыбы.
Другая рыба Это описание Другой рыбы