таблици

Таблиците се поддържат със стандартно маркиране. Ето една типична таблица със заглавен ред, няколко обикновени реда и ред, маркиран като <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
Две риби Това е описание на Two Fish
Червена риба Това е описание на червена риба
Синя Риба Това е описание на Blue Fish
Други риби Това е описание на други риби

Редуващи се четни редове

В този пример цвят от цветовете на таблицата също се прилага към таблицата чрез green клас. 

<table class="alternating-even-rows green">
Име Описание
Една риба Това е описание на One Fish
Две риби Това е описание на Two Fish
Червена риба Това е описание на червена риба
Синя Риба Това е описание на Blue Fish
Други риби Това е описание на други риби