Tabuľky

Tabuľky sú podporované štandardným označením. Tu je typická tabuľka s riadkom nadpisu, niekoľkými bežnými riadkami a riadkom označeným ako <tr class="alt"> , ktorý vytvára tmavšie pozadie, ktoré možno použiť ako alternatívnu hlavičku.

Vykreslené

Jeden Dvaja Tri
1,0 2.0 3.0
1.1 2.1 3.1
Tu je niekoľko čísel, ktoré končia na 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>```

Responzívne tabuľky

DevSite podporuje responzívne tabuľky, ktoré sa na menších obrazovkách rozkladajú inak. Tu je normálna referenčná tabuľka:

Vykreslené

Meno Typ Popis
value String Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára
navigationType PageNavigationType Typ navigácie výberu

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>

A tu je rovnaká tabuľka prispôsobená na použitie class="responsive" . Ak zúžite okno prehliadača, rozloží sa zvislo namiesto vodorovne:

Vykreslené

Parametre
value String
Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára
navigationType PageNavigationType
Typ navigácie výberu

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>

Ak chcete použiť class="responsive" , tabuľky musia byť štruktúrované konkrétnym spôsobom:

  • V tabuľke musia byť iba dva stĺpce: prvý stĺpec pre definované veci (kľúč) a druhý stĺpec pre všetky informácie o tomto kľúči, v prípade potreby vo viacerých riadkoch. Toto obmedzenie v dvoch stĺpcoch znamená, že responzívne tabuľky nemožno použiť na skutočne dvojrozmerné tabuľkové údaje, porovnávanie prvkov na základe začiarknutia, ale sú vhodné na referenčné informácie (alebo akékoľvek iné údaje, ktoré by sa dali primerane vyjadriť zoznamom definícií namiesto stôl).
  • Ak existuje viacero riadkov informácií o kľúči – povedzme typ a popis – zalamte každý riadok do <p> , aby sa vynútili zalomenia riadkov (namiesto <br> ).
  • V riadku hlavičky musí byť iba jedna bunka. Pomocou <th colspan="2"> ho prinútite preklenúť oba stĺpce. Aby sme vám pripomenuli toto správanie, DevSite automaticky skryje všetky <th> po prvom (ktorý zámerne vyzerá veľmi nefunkčný).

Táto technika funguje aj pre veľmi zložité tabuľky, dokonca aj tie, ktoré obsahujú vnorené tabuľky:

Vykreslené

Podrobnosti
Parametre dopytu
pageSize
int32
Požadovaná veľkosť strany. Server môže vrátiť menej políc, ako je požadované. Ak nie je zadané, server vyberie vhodnú predvolenú hodnotu.
pageToken
string
Token identifikujúci stránku s výsledkami, ktoré by mal server vrátiť. Zvyčajne je to hodnota nextPageToken vrátená z predchádzajúceho volania metódy list .
Telo žiadosti
Telo požiadavky musí byť prázdne.
Autorizácia
Vyžaduje aspoň jeden z nasledujúcich rozsahov 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
odpoveď
Ak je odpoveď úspešná, telo odpovede obsahuje údaje s nasledujúcou štruktúrou: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Zoznam políc.
nextPageToken
string
Token na získanie ďalšej stránky výsledkov. Odovzdajte túto hodnotu do poľa pageToken v nasledujúcom volaní metódy list na získanie ďalšej stránky výsledkov.

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>
Nútené do obsahu
Vloženie <h2> alebo <h3> do hlavičky tabuľky ( <th> ) vynúti hlavičku do obsahu, ako v prípade tejto tabuľky. V hlavičke tabuľky sú <h2> a <h3> v štýle bežného textu, takže čitatelia to nebudú vedieť rozpoznať.

Tabuľky s pevným rozložením

Ak máte tabuľky s obsahom, ktorý je širší ako bunka tabuľky (napríklad bloky kódu), môžete prinútiť bunky tabuľky s týmto obsahom, aby na bunky tabuľky použili rolovanie pri pretečení namiesto posúvania celej tabuľky pridaním pevnej triedy do prvok <table> :

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

Nasledujúca tabuľka obsahuje fixed triedu a na jej bunky je aplikované pretečenie:

Vykreslené

Meno Typ Popis
value String

Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Typ navigácie výberu

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>

Porovnajte to s tabuľkou nižšie, ktorá ukazuje predvolené správanie rozloženia, kde sa pretečenie aplikuje na celú tabuľku:

Vykreslené

Meno Typ Popis
value String

Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType Typ navigácie výberu

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>

Ovládanie šírky stĺpcov

V predvolenom nastavení tabuľky s pevným rozložením rovnomerne rozdeľujú celkovú šírku tabuľky do každého z jej stĺpcov (tj tabuľka s pevným rozložením s tromi stĺpcami zobrazuje každý stĺpec na 33,33 % celkovej šírky tabuľky).

Vykreslené

Meno Typ Popis
value String

Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Typ navigácie výberu

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>

Ak chcete ovládať šírku stĺpcov v tabuľke s pevným rozložením, bunky v prvom riadku tabuľky musia obsahovať jednu z nasledujúcich položiek:

atribúty šírky, ktorých hodnoty sú buď v percentách ( 20% ) alebo v pixeloch ( 240px ) prvok <colgroup> s podradenými prvkami <col> , ktoré majú nastavené atribúty width Ak chcete dosiahnuť najlepšie výsledky, nenastavujte width na poslednom prvku <col> alebo poslednej bunke tabuľky, pretože prehliadač túto hodnotu vypočítava za vás.

Šírky na bunkách tabuľky

Vykreslené

Meno Typ Popis
value String

Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Typ navigácie výberu

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>

Zapnuté šírky prvkov

Vykreslené

Meno Typ Popis
value String

Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Typ navigácie výberu

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>

Responzívne tabuľky s pevným rozložením

Tabuľky s pevným rozložením môžete kombinovať aj s responzívnymi tabuľkami, ak na nastavenie atribútov šírky použijete možnosť <colgroup> a <col> : 

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

Vykreslené

Parametre
value String
Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Typ navigácie výberu

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>

Stoly v plnej šírke

DevSite podporuje tabuľky, ktoré sa rozprestierajú po celej šírke stránky pomocou <table class="full-width">...</table> v tabuľkách najvyššej úrovne (t. j. tabuľkách na rovnakej hierarchickej úrovni ako nadpisy stránok):

Meno Typ Popis
hodnotu Reťazec Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára
typ navigácie PageNavigationType Typ navigácie výberu

Tabuľky s vertikálnymi pravidlami

Vertikálne pravidlá medzi každým <th> a <td> v riadku tabuľky môžete zobraziť pomocou <table class="vertical-rules">...</table> :

Meno Typ Popis
hodnotu Reťazec Hodnota voľby, ktorú respondenti vidia ako označenie pri prezeraní formulára
typ navigácie PageNavigationType Typ navigácie výberu

Text v stĺpcoch

Text môžete usporiadať do stĺpcov a odstrániť všetky štýly z <table> pomocou <table class="columns">...</table> . Toto sa zvyčajne používa na usporiadanie dlhých úzkych zoznamov.

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>

Farby tabuľky

Štandardné tabuľky sú farebné ako je uvedené vyššie a niekoľko ďalších farieb je dostupných s použitím tried blue , cyan , green , orange , pink a purple . 

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

Viaceré farby v rámci jednej tabuľky nie sú podporované, ale názvy tried farieb tabuliek možno kombinovať s inými možnosťami názvu triedy tabuľky uvedenými vyššie. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Modrá
key type
Niektoré informácie o key .
azúrová
key type
Niektoré informácie o key .
Zelená
key type
Niektoré informácie o key .
Oranžová
key type
Niektoré informácie o key .
Ružová
key type
Niektoré informácie o key .
Fialová
key type
Niektoré informácie o key .

Alternatívne farby riadkov

Ak chcete v tabuľke striedať farby riadkov pozadia, pridajte do prvku <table> triedu alternating-odd-rows alebo alternating-even-rows .

Striedajúce sa nepárne riadky 

<table class="alternating-odd-rows">
Meno Popis
Jedna Ryba Toto je popis jednej ryby
Dve ryby Toto je popis Two Fish
Červená ryba Toto je popis Red Fish
Modrá ryba Toto je popis Blue Fish
Iné ryby Toto je popis Iné ryby

Striedanie párnych riadkov

V tomto príklade sa farba z farieb tabuľky aplikuje aj na tabuľku prostredníctvom green triedy. 

<table class="alternating-even-rows green">
Meno Popis
Jedna Ryba Toto je popis jednej ryby
Dve ryby Toto je popis Two Fish
Červená ryba Toto je popis Red Fish
Modrá ryba Toto je popis Blue Fish
Iné ryby Toto je popis Iné ryby