Tabulky

Tabulky jsou podporovány standardním označením. Zde je typická tabulka s řádkem záhlaví, několika normálními řádky a řádkem označeným jako <tr class="alt"> , který vytváří tmavší pozadí, které lze použít jako alternativní záhlaví.

Vykresleno

Jeden Dva Tři
1,0 2,0 3.0
1.1 2.1 3.1
Zde jsou některá čísla, která končí 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>```

Responzivní tabulky

DevSite podporuje responzivní tabulky, které se na menších obrazovkách rozkládají jinak. Zde je normální referenční tabulka:

Vykresleno

Jméno Typ Popis
value String Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře
navigationType PageNavigationType Typ navigace výběru

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 zde je stejná tabulka přizpůsobená pro použití class="responsive" . Pokud zúžíte okno prohlížeče, rozloží se svisle místo vodorovně:

Vykresleno

Parametry
value String
Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře
navigationType PageNavigationType
Typ navigace výběru

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>

Chcete-li použít class="responsive" , tabulky musí být strukturovány určitým způsobem:

  • V tabulce musí být pouze dva sloupce: první sloupec pro definované věci (klíč) a druhý sloupec pro všechny informace o tomto klíči, v případě potřeby na více řádcích. Toto omezení ve dvou sloupcích znamená, že responzivní tabulky nelze použít pro skutečně dvourozměrná tabulková data, porovnání funkcí na základě zaškrtnutí, ale jsou velmi vhodné pro referenční informace (nebo jakákoli jiná data, která by mohla být rozumně vyjádřena seznamem definic namísto stůl).
  • Pokud existuje více řádků informací o klíči – řekněme typ a popis – zalomte každý řádek do <p> , abyste vynutili zalomení řádků (místo <br> ).
  • V řádku záhlaví musí být pouze jedna buňka. Pomocí <th colspan="2"> jej vynutíte, aby pokrýval oba sloupce. Aby vám toto chování připomnělo, DevSite automaticky skryje všechny <th> po prvním (který záměrně vypadá velmi nefunkčně).

Tato technika funguje také pro velmi složité tabulky, dokonce i pro ty, které obsahují vnořené tabulky:

Vykresleno

Podrobnosti
Parametry dotazu
pageSize
int32
Požadovaná velikost stránky. Server může vrátit méně polic, než bylo požadováno. Pokud není specifikováno, server vybere vhodnou výchozí hodnotu.
pageToken
string
Token identifikující stránku s výsledky, kterou by měl server vrátit. Obvykle se jedná o hodnotu nextPageToken vrácenou z předchozí metody volání list .
Tělo žádosti
Tělo požadavku musí být prázdné.
Povolení
Vyžaduje alespoň jeden z následujících rozsahů 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
Odpověď
V případě úspěchu obsahuje tělo odpovědi data s následující strukturou: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Seznam polic.
nextPageToken
string
Token pro načtení další stránky výsledků. Předejte tuto hodnotu v poli pageToken v následném volání metody list pro načtení další stránky výsledků.

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>
Vnucování do obsahu
Vložení <h2> nebo <h3> do záhlaví tabulky ( <th> ) vynutí záhlaví do obsahu, jako u této tabulky. Uvnitř záhlaví tabulky jsou <h2> a <h3> stylizovány jako běžný text, takže čtenáři to nebudou moci poznat.

Tabulky s pevným rozložením

Pokud máte tabulky s obsahem, který je širší než buňka tabulky (jako jsou bloky kódu), můžete donutit buňky tabulky s tímto obsahem, aby na buňky tabulky použily přetékající posouvání namísto posouvání celé tabulky přidáním pevné třídy do prvek <table> :

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

Následující tabulka obsahuje fixed třídu a na její buňky je aplikováno přetečení:

Vykresleno

Jméno Typ Popis
value String

Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Typ navigace výběru

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>

Porovnejte to s tabulkou níže, která ukazuje výchozí chování rozvržení, kde je přetečení aplikováno na celou tabulku:

Vykresleno

Jméno Typ Popis
value String

Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType Typ navigace výběru

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ádání šířky sloupců

Ve výchozím nastavení tabulky s pevným rozložením rovnoměrně rozdělují celkovou šířku tabulky na každý z jejích sloupců (tj. tabulka s pevným rozložením se třemi sloupci zobrazuje každý sloupec na 33,33 % celkové šířky tabulky).

Vykresleno

Jméno Typ Popis
value String

Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Typ navigace výběru

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>

Chcete-li řídit šířku sloupců v tabulce s pevným rozložením, musí buňky v prvním řádku tabulky obsahovat jednu z následujících položek:

atributy width, jejichž hodnoty jsou buď v procentech ( 20% ) nebo v pixelech ( 240px ) prvek <colgroup> s podřízenými prvky <col> , které mají nastaveny atributy width Pro dosažení nejlepších výsledků nenastavujte width na posledním prvku <col> nebo poslední buňce tabulky, protože prohlížeč tuto hodnotu vypočítává za vás.

Šířky na buňkách tabulky

Vykresleno

Jméno Typ Popis
value String

Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Typ navigace výběru

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>

Šířky zapnuty prvky

Vykresleno

Jméno Typ Popis
value String

Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Typ navigace výběru

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>

Responzivní tabulky s pevným rozložením

Můžete také kombinovat tabulky s pevným rozložením s responzivními tabulkami, pokud pro nastavení atributů šířky použijete možnost <colgroup> a <col> : 

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

Vykresleno

Parametry
value String
Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Typ navigace výběru

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 plné šířce

DevSite podporuje tabulky, které pokrývají celou šířku stránky pomocí <table class="full-width">...</table> v tabulkách nejvyšší úrovně (tj. tabulkách na stejné hierarchické úrovni jako záhlaví stránek):

Jméno Typ Popis
hodnota Řetězec Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře
typ navigace PageNavigationType Typ navigace výběru

Tabulky s vertikálními pravidly

Vertikální pravidla mezi každým <th> a <td> v řádku tabulky můžete zobrazit pomocí <table class="vertical-rules">...</table> :

Jméno Typ Popis
hodnota Řetězec Hodnota volby, kterou respondenti vidí jako štítek při prohlížení formuláře
typ navigace PageNavigationType Typ navigace výběru

Text ve sloupcích

Text můžete uspořádat do sloupců a odstranit všechny styly z <table> pomocí <table class="columns">...</table> . To se obvykle používá pro uspořádání dlouhých úzkých seznamů.

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>

Barvy stolu

Standardní tabulky jsou barevné, jak je uvedeno výše, a několik dalších barev je dostupných pomocí tříd blue , cyan , green , orange , pink a purple . 

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

Více barev v jedné tabulce není podporováno, ale názvy tříd barev tabulky lze kombinovat s dalšími možnostmi názvu třídy tabulky uvedenými výše. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Modrý
key type
Některé informace o key .
azurová
key type
Některé informace o key .
Zelený
key type
Některé informace o key .
Pomerančový
key type
Některé informace o key .
Růžový
key type
Některé informace o key .
Fialová
key type
Některé informace o key .

Střídejte barvy řádků

Chcete-li v tabulce střídat barvy řádků pozadí, přidejte do prvku <table> třídu alternating-odd-rows nebo alternating-even-rows .

Střídání lichých řádků 

<table class="alternating-odd-rows">
Jméno Popis
Jedna Ryba Toto je popis One Fish
Dvě ryby Toto je popis Two Fish
Červená ryba Toto je popis Red Fish
Modrá ryba Toto je popis Blue Fish
Ostatní Ryby Toto je popis Other Fish

Střídání sudých řad

V tomto příkladu je barva z barev tabulky také aplikována na tabulku prostřednictvím green třídy. 

<table class="alternating-even-rows green">
Jméno Popis
Jedna Ryba Toto je popis One Fish
Dvě ryby Toto je popis Two Fish
Červená ryba Toto je popis Red Fish
Modrá ryba Toto je popis Blue Fish
Ostatní Ryby Toto je popis Other Fish