Táblázatok

A táblázatok szabványos jelöléssel támogatottak. Íme egy tipikus táblázat egy címsorral, több szabályos sorral és egy <tr class="alt"> ként megjelölt sorral, amely sötétebb hátteret hoz létre, amely alternatív fejlécként is használható.

Renderelt

Egy Két Három
1.0 2.0 3.0
1.1 2.1 3.1
Jöjjön néhány szám, amelyek 0,2-re végződnek!
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>```

Reszponzív táblázatok

A DevSite támogatja a reszponzív táblázatokat, amelyek eltérően helyezkednek el a kisebb képernyőkön. Íme egy normál referencia táblázat:

Renderelt

Név Írja be Leírás
value String A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor
navigationType PageNavigationType A választás navigációs típusa

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>

És itt van ugyanaz a táblázat, class="responsive" használatához igazítva. Ha szűkíti a böngészőablakot, az nem vízszintesen, hanem függőlegesen jelenik meg:

Renderelt

Paraméterek
value String
A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor
navigationType PageNavigationType
A választás navigációs típusa

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" használatához a táblázatokat meghatározott módon kell felépíteni:

  • A táblázatban csak két oszlop lehet: az első oszlop a definiálandó dolgoknak (a kulcs), a második oszlop pedig a kulcsra vonatkozó összes információnak, szükség esetén több sorban. Ez a kétoszlopos megszorítás azt jelenti, hogy a reszponzív táblázatok nem használhatók valóban kétdimenziós táblázatos adatokhoz, pipa alapú jellemző-összehasonlításhoz, de referenciainformációknak (vagy bármi más olyan adatnak, amelyet ésszerűen egy definíciós listával lehetne kifejezni egy asztal).
  • Ha több sornyi információ található a kulccsal kapcsolatban – mondjuk egy típus és egy leírás –, az egyes sorokat <p> karakterláncba csomagolja a sortörések kikényszerítéséhez ( <br> helyett).
  • A fejlécsorban csak egy cella lehet. Használja <th colspan="2"> parancsot, hogy mindkét oszlopot átfogja. Hogy emlékeztesse Önt erre a viselkedésre, a DevSite automatikusan elrejti az első utáni <th> elemet (ami szándékosan nagyon töröttnek tűnik).

Ez a technika nagyon összetett táblázatoknál is működik, még azoknál is, amelyek beágyazott táblákat tartalmaznak:

Renderelt

Részletek
Paraméterek lekérdezése
pageSize
int32
Kért oldalméret. A szerver a kértnél kevesebb polcot küldhet vissza. Ha nincs megadva, a szerver kiválaszt egy megfelelő alapértelmezett értéket.
pageToken
string
Egy token, amely azonosítja azt az eredményoldalt, amelyet a szervernek vissza kell adnia. Általában ez a nextPageToken értéke az előző call to list metódusból visszaadott érték.
Kérelem szerve
A kérelem törzsének üresnek kell lennie.
Engedélyezés
A következő OAuth 2.0 hatókörök közül legalább egy szükséges: 
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
Válasz
Sikeres esetben a választörzs a következő szerkezetű adatokat tartalmazza: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
A polcok listája.
nextPageToken
string
Token az eredmények következő oldalának lekéréséhez. Adja át ezt az értéket a pageToken mezőben a list metódus következő hívásakor a következő eredményoldal lekéréséhez.

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>
Tartalomjegyzékbe kényszerítés
Ha egy <h2> vagy <h3> jelet helyez el egy táblázat fejlécébe ( <th> ), a fejléc a tartalomjegyzékbe kerül, mint ennél a táblázatnál is. A táblázat fejlécében <h2> és <h3> hagyományos szöveghez hasonló stílusú, így az olvasók nem fogják tudni megmondani.

Fix elrendezésű táblázatok

Ha olyan táblázatai vannak, amelyek tartalma szélesebb, mint egy táblázatcella (például kódblokkok), akkor kényszerítheti az adott tartalommal rendelkező táblázatcellákat, hogy túlcsordulási görgetést alkalmazzanak a táblázat celláira, ahelyett, hogy a teljes táblázat görgetése lenne. a <table> elem:

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

A következő táblázat tartalmazza a fixed osztályt, és túlcsordulást alkalmaz a celláira:

Renderelt

Név Írja be Leírás
value String

A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType A választás navigációs típusa

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>

Hasonlítsa össze ezt az alábbi táblázattal, amely az alapértelmezett elrendezési viselkedést mutatja, ahol a túlcsordulás a teljes táblázatra vonatkozik:

Renderelt

Név Írja be Leírás
value String

A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType A választás navigációs típusa

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>

Oszlopszélesség szabályozása

Alapértelmezés szerint a rögzített elrendezésű táblázatok egyenletesen osztják el a táblázat teljes szélességét az egyes oszlopai között (azaz egy három oszlopból álló rögzített elrendezésű táblázat minden oszlopot a táblázat teljes szélességének 33,33%-án jelenít meg).

Renderelt

Név Írja be Leírás
value String

A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType A választás navigációs típusa

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>

A rögzített elrendezésű táblázat oszlopainak szélességének szabályozásához a táblázat első sorában lévő celláknak tartalmazniuk kell a következők egyikét:

Szélesség attribútum(ok), amelyek értéke százalékban ( 20% ) vagy képpontban ( 240px ) adható meg egy <colgroup> elemnek olyan <col> gyermekelemekkel, amelyeken width attribútum(ok) vannak beállítva A legjobb eredmény érdekében ne állítson be width az utolsó <col> elemen vagy az utolsó táblázatcellán, mivel a böngésző kiszámítja ezt az értéket.

Szélesség a táblázat celláin

Renderelt

Név Írja be Leírás
value String

A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType A választás navigációs típusa

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>

Szélesség be elemeket

Renderelt

Név Írja be Leírás
value String

A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType A választás navigációs típusa

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>

Fix elrendezésű reszponzív táblázatok

A rögzített elrendezésű táblázatokat is kombinálhatja reszponzív táblázatokkal, ha a <colgroup> és <col> opciót használja a szélességi attribútumok beállításához: 

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

Renderelt

Paraméterek
value String
A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
A választás navigációs típusa

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>

Teljes szélességű asztalok

A DevSite támogatja az oldal teljes szélességét lefedő táblázatokat <table class="full-width">...</table> használatával a legfelső szintű táblázatokon (azaz az oldalfejlécekkel azonos hierarchikus szinten lévő táblázatok):

Név Írja be Leírás
érték Húr A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor
navigationType PageNavigationType A választás navigációs típusa

Táblázatok függőleges szabályokkal

Függőleges szabályokat jeleníthet meg egy táblázatsorban az egyes <th> és <td> között <table class="vertical-rules">...</table> használatával:

Név Írja be Leírás
érték Húr A választás értéke, amelyet a válaszadók címkének látnak az űrlap megtekintésekor
navigationType PageNavigationType A választás navigációs típusa

Szöveg oszlopokban

<table class="columns">...</table> használatával a szöveget oszlopokba rendezheti, és minden stílust eltávolíthat egy <table> -ból. Ezt általában hosszú, szűk listák rendezésére használják.

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>

Az asztal színei

A szabványos táblázatok a fentiek szerint vannak színezve, és számos más szín is elérhető a blue , cyan , green , orange , pink és purple osztályok használatával. 

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

Egy táblán belül több szín nem támogatott, de a táblaszín osztálynevek kombinálhatók a fent említett táblaosztálynév-beállításokkal. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Kék
key type
Néhány információ a key .
Cián
key type
Néhány információ a key .
Zöld
key type
Néhány információ a key .
Narancs
key type
Néhány információ a key .
Rózsaszín
key type
Néhány információ a key .
Lila
key type
Néhány információ a key .

Alternatív sorszínek

Ha a táblázatban a háttér sorszíneit váltakoztatni szeretné, adjon hozzá egy alternating-odd-rows vagy alternating-even-rows osztályt a <table> elemhez.

Váltakozó páratlan sorok 

<table class="alternating-odd-rows">
Név Leírás
Egy hal Ez a One Fish leírása
Két hal Ez a Két hal leírása
Vörös hal Ez a Red Fish leírása
Kék hal Ez a Blue Fish leírása
Egyéb halak Ez az Egyéb hal leírása

Páros sorok váltogatása

Ebben a példában a táblázat színei közül egy színt is alkalmazunk a táblázatra a green osztályon keresztül. 

<table class="alternating-even-rows green">
Név Leírás
Egy hal Ez a One Fish leírása
Két hal Ez a Két hal leírása
Vörös hal Ez a Red Fish leírása
Kék hal Ez a Blue Fish leírása
Egyéb halak Ez az Egyéb hal leírása