Столови

Табеле су подржане са стандардним ознакама. Ево типичне табеле са редом заглавља, неколико редовних редова и редом означеним као <tr class="alt"> , што производи тамнију позадину која се може користити као алтернативно заглавље.

Рендеред

Један Два Три
1.0 2.0 3.0
1.1 2.1 3.1
Ево неких бројева који се завршавају на .2!
1.2 2.2 3.2

ХТМЛ 

<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>```

Респонсиве таблес

ДевСите подржава табеле са одзивом које су другачије постављене на мањим екранима. Ево нормалне референтне табеле:

Рендеред

Име Тип Опис
value String Вредност избора, коју испитаници виде као ознаку када гледају образац
navigationType PageNavigationType Тип навигације избора

ХТМЛ 

<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
Тип навигације избора

ХТМЛ 

<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"> да бисте га натерали да обухвата обе колоне. Да вас подсети на ово понашање, ДевСите аутоматски сакрива било који <th> након првог (што намерно изгледа веома покварено).

Ова техника такође функционише за веома сложене табеле, чак и оне које садрже угнежђене табеле:

Рендеред

Детаљи
Параметри упита
pageSize
int32
Захтевана величина странице. Сервер може да врати мање полица од захтеваног. Ако није наведено, сервер ће изабрати одговарајућу подразумевану вредност.
pageToken
string
Токен који идентификује страницу резултата коју сервер треба да врати. Обично је ово вредност nextPageToken враћене из претходног позива методе list .
Тело захтева
Тело захтева мора бити празно.
Ауторизација
Захтева најмање један од следећих ОАутх 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 да бисте преузели следећу страницу резултата.

ХТМЛ 

<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 Тип навигације избора

ХТМЛ 

<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 Тип навигације избора

ХТМЛ 

<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 Тип навигације избора

ХТМЛ 

<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 Тип навигације избора

ХТМЛ 

<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 Тип навигације избора

ХТМЛ 

<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
Тип навигације избора

ХТМЛ 

<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>

Таблице пуне ширине

ДевСите подржава табеле које обухватају целу ширину странице коришћењем <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">
Име Опис
Једна риба Ово је опис једне рибе
Две рибе Ово је опис Две рибе
Црвена риба Ово је опис Црвене рибе
Плава риба Ово је опис Плаве рибе
Остале рибе Ово је опис Друге рибе