Tabulas

Tabulas tiek atbalstītas ar standarta marķējumu. Šeit ir tipiska tabula ar virsraksta rindu, vairākām regulārām rindām un rindu, kas atzīmēta kā <tr class="alt"> , kas rada tumšāku fonu, ko var izmantot kā alternatīvu galveni.

Renderēts

Viens Divas Trīs
1.0 2.0 3.0
1.1 2.1 3.1
Šeit ir daži skaitļi, kas beidzas ar 0,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>```

Atsaucīgas tabulas

DevSite atbalsta atsaucīgas tabulas, kas mazākos ekrānos ir izvietotas atšķirīgi. Šeit ir parasta atsauces tabula:

Renderēts

Vārds Tips Apraksts
value String Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu
navigationType PageNavigationType Izvēles navigācijas veids

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>

Un šeit ir tā pati tabula, kas pielāgota class="responsive" lietošanai. Sašaurinot pārlūkprogrammas logu, tas tiks izkārtots vertikāli, nevis horizontāli:

Renderēts

Parametri
value String
Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu
navigationType PageNavigationType
Izvēles navigācijas veids

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>

Lai izmantotu class="responsive" , tabulas ir jāstrukturē noteiktā veidā:

  • Tabulā ir jābūt tikai divām kolonnām: pirmajā kolonnā ir definētas lietas (atslēga) un otrā kolonna visai informācijai par šo atslēgu, ja nepieciešams, vairākās rindās. Šis divu sleju ierobežojums nozīmē, ka adaptīvās tabulas nevar izmantot patiesi divdimensiju tabulas datiem, ar atzīmi balstītai funkciju salīdzināšanai, taču tās ir labi piemērotas atsauces informācijai (vai jebkuriem citiem datiem, ko var pamatoti izteikt definīciju sarakstā, nevis galds).
  • Ja par atslēgu ir vairākas informācijas rindiņas (piemēram, veids un apraksts), katru rindiņu aplauziet ar <p> lai piespiestu rindiņas pārtraukumus (nevis <br> ).
  • Galvenes rindā jābūt tikai vienai šūnai. Izmantojiet <th colspan="2"> , lai piespiestu to aptvert abas kolonnas. Lai atgādinātu par šo darbību, DevSite automātiski paslēpj jebkuru <th> pēc pirmās (kas ar nolūku izskatās ļoti bojāts).

Šis paņēmiens darbojas arī ļoti sarežģītām tabulām, pat tām, kurās ir ligzdotas tabulas:

Renderēts

Sīkāka informācija
Vaicājuma parametri
pageSize
int32
Pieprasītais lapas izmērs. Serveris var atgriezt mazāk plauktu nekā pieprasīts. Ja tas nav norādīts, serveris izvēlēsies atbilstošu noklusējuma iestatījumu.
pageToken
string
Tokens, kas identificē rezultātu lapu, kas serverim jāatgriež. Parasti tā ir nextPageToken vērtība, kas atgriezta no iepriekšējās izsaukuma uz list metodes.
Pieprasījuma struktūra
Pieprasījuma pamattekstam ir jābūt tukšam.
Autorizācija
Nepieciešams vismaz viens no šiem OAuth 2.0 tvērumiem: 
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
Atbilde
Ja tas ir veiksmīgs, atbildes pamattekstā ir dati ar šādu struktūru: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Plauktu saraksts.
nextPageToken
string
Tokens, lai izgūtu nākamo rezultātu lapu. Nododiet šo vērtību laukā pageToken nākamajā list metodes izsaukumā, lai izgūtu nākamo rezultātu lapu.

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>
Piespiešana satura rādītājā
Ievietojot <h2> vai <h3> tabulas galvenē ( <th> ), galvene tiks iekļauta satura rādītājā, tāpat kā šajā tabulā. Tabulas galvenē <h2> un <h3> ir veidoti kā parasts teksts, tāpēc lasītāji to nevarēs pateikt.

Fiksēta izkārtojuma tabulas

Ja jums ir tabulas, kuru saturs ir platāks par tabulas šūnu (piemēram, koda bloki), varat piespiest tabulas šūnām ar šo saturu piemērot pārpildes ritināšanu tabulas šūnām, nevis ritināt visu tabulu, pievienojot fiksētu klasi. elements <table> :

<table class="fixed">...</table>

Šajā tabulā ir iekļauta fixed klase, un tās šūnām ir piemērota pārpilde:

Renderēts

Vārds Tips Apraksts
value String

Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Izvēles navigācijas veids

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>

Salīdziniet to ar tālāk redzamo tabulu, kurā parādīta noklusējuma izkārtojuma darbība, kurā pārpilde tiek lietota visai tabulai:

Renderēts

Vārds Tips Apraksts
value String

Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType Izvēles navigācijas veids

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>

Kolonnu platuma kontrole

Pēc noklusējuma fiksēta izkārtojuma tabulas vienmērīgi sadala tabulas kopējo platumu katrā tās kolonnā (ti, fiksēta izkārtojuma tabula ar trim kolonnām katra kolonna parāda 33,33% no tabulas kopējā platuma).

Renderēts

Vārds Tips Apraksts
value String

Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Izvēles navigācijas veids

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>

Lai kontrolētu fiksēta izkārtojuma tabulas kolonnu platumu, tabulas pirmās rindas šūnās ir jāietver viens no šiem elementiem:

platuma atribūts(-i), kura vērtības ir vai nu procentos ( 20% ) vai pikseļos ( 240px ), <colgroup> elements ar <col> pakārtotajiem elementiem, kuriem ir iestatīts(-i) width atribūts(-i), lai iegūtu labākos rezultātus, neiestatiet width pēdējā <col> elementā vai pēdējā tabulas šūnā, jo pārlūkprogramma aprēķina šo vērtību jūsu vietā.

Platumi uz tabulas šūnām

Renderēts

Vārds Tips Apraksts
value String

Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Izvēles navigācijas veids

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>

Platumi ieslēgti elementi

Renderēts

Vārds Tips Apraksts
value String

Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Izvēles navigācijas veids

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>

Fiksēta izkārtojuma adaptīvās tabulas

Varat arī apvienot fiksēta izkārtojuma tabulas ar adaptīvām tabulām , ja platuma atribūtu iestatīšanai izmantojat opcijas <colgroup> un <col> : 

<table class="responsive fixed">...</table>

Renderēts

Parametri
value String
Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Izvēles navigācijas veids

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>

Pilna platuma galdi

DevSite atbalsta tabulas, kas aptver visu lapas platumu, izmantojot <table class="full-width">...</table> augšējā līmeņa tabulās (t.i., tabulās vienā hierarhijas līmenī ar lapu virsrakstiem):

Vārds Tips Apraksts
vērtību Stīga Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu
navigācijas veids PageNavigationType Izvēles navigācijas veids

Tabulas ar vertikāliem likumiem

Varat parādīt vertikālās kārtulas starp <th> un <td> tabulas rindā, izmantojot <table class="vertical-rules">...</table> :

Vārds Tips Apraksts
vērtību Stīga Izvēles vērtība, ko respondenti redz kā etiķeti, skatot veidlapu
navigācijas veids PageNavigationType Izvēles navigācijas veids

Teksts kolonnās

Varat kārtot tekstu kolonnās un noņemt visu stilu no <table> , izmantojot <table class="columns">...</table> . To parasti izmanto garu šauru sarakstu kārtošanai.

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>

Galdu krāsas

Standarta tabulas ir krāsotas, kā norādīts iepriekš, un ir pieejamas vairākas citas krāsas, izmantojot klases blue , cyan , green , orange , pink un purple . 

<table class="blue">...</table>

Vairākas krāsas vienā tabulā netiek atbalstītas, taču tabulu krāsu klases nosaukumus var kombinēt ar citām iepriekš minētajām tabulas klases nosaukuma opcijām. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Zils
key type
Nedaudz informācijas par key .
Ciāna
key type
Nedaudz informācijas par key .
Zaļš
key type
Nedaudz informācijas par key .
Oranžs
key type
Nedaudz informācijas par key .
Rozā
key type
Nedaudz informācijas par key .
Violeta
key type
Nedaudz informācijas par key .

Alternatīvas rindu krāsas

Lai tabulā mainītu fona rindu krāsas, elementam <table> pievienojiet klasi alternating-odd-rows vai alternating-even-rows .

Pārmaiņus nepāra rindas 

<table class="alternating-odd-rows">
Vārds Apraksts
Viena zivs Šis ir vienas zivs apraksts
Divas Zivis Šis ir divu zivju apraksts
Sarkanas zivis Šis ir Red Fish apraksts
Zilā zivs Šis ir Blue Fish apraksts
Citas zivis This is the description of Citas zivis

Pārmaiņus pāra rindas

Šajā piemērā krāsa no tabulas krāsām tiek piemērota arī tabulai, izmantojot green klasi. 

<table class="alternating-even-rows green">
Vārds Apraksts
Viena zivs Šis ir vienas zivs apraksts
Divas Zivis Šis ir divu zivju apraksts
Sarkanas zivis Šis ir Red Fish apraksts
Zilā zivs Šis ir Blue Fish apraksts
Citas zivis Tas ir apraksts Citas zivis