Taulukot

Taulukoita tuetaan vakiomerkinnöillä. Tässä on tyypillinen taulukko, jossa on otsikkorivi, useita säännöllisiä rivejä ja rivi, joka on merkitty <tr class="alt"> , joka tuottaa tummemman taustan, jota voidaan käyttää vaihtoehtoisena otsikkona.

Renderoitu

Yksi Kaksi Kolme
1.0 2.0 3.0
1.1 2.1 3.1
Tässä muutamia numeroita, jotka päättyvät 0,2:een!
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>```

Responsiiviset taulukot

DevSite tukee responsiivisia taulukoita, jotka asettuvat eri tavalla pienemmille näytöille. Tässä on tavallinen viitetaulukko:

Renderoitu

Nimi Tyyppi Kuvaus
value String Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan
navigationType PageNavigationType Valinnan navigointityyppi

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>

Ja tässä on sama taulukko, joka on mukautettu käyttämään class="responsive" . Jos kavennat selainikkunaa, se asettuu pystysuoraan vaakasuuntaisen sijaan:

Renderoitu

Parametrit
value String
Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan
navigationType PageNavigationType
Valinnan navigointityyppi

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>

Jotta voit käyttää class="responsive" , taulukot on rakennettava tietyllä tavalla:

  • Taulukossa saa olla vain kaksi saraketta: ensimmäinen sarake määritettäville asioille (avain) ja toinen sarake kaikille kyseistä avainta koskevista tiedoista, tarvittaessa useilla riveillä. Tämä kaksisarakkeinen rajoitus tarkoittaa, että responsiivisia taulukoita ei voida käyttää todella kaksiulotteiseen taulukkotietoon, valintamerkkipohjaiseen ominaisuusvertailuon, mutta ne sopivat hyvin viitetiedoille (tai mille tahansa muulle datalle, joka voidaan kohtuudella ilmaista määritelmäluettelolla pöytä).
  • Jos avaimesta on useita tietorivejä – esimerkiksi tyyppi ja kuvaus – rivitä jokainen rivi <p> -kirjaimeen pakottaaksesi rivinvaihdot (eikä <br> ).
  • Otsikkorivillä saa olla vain yksi solu. Käytä <th colspan="2"> pakottaaksesi sen kattamaan molemmat sarakkeet. Muistuttaakseen tästä käyttäytymisestä DevSite piilottaa automaattisesti kaikki <th> ensimmäisen jälkeen (joka tarkoituksella näyttää erittäin rikki).

Tämä tekniikka toimii myös erittäin monimutkaisissa taulukoissa, jopa niissä, jotka sisältävät sisäkkäisiä taulukoita:

Renderoitu

Yksityiskohdat
Kyselyparametrit
pageSize
int32
Pyydetty sivukoko. Palvelin saattaa palauttaa pyydettyä vähemmän hyllyjä. Jos ei ole määritetty, palvelin valitsee sopivan oletusarvon.
pageToken
string
Tunnus, joka tunnistaa tulossivun, jonka palvelimen tulee palauttaa. Tyypillisesti tämä on nextPageToken arvo, joka palautetaan edellisestä kutsu list -metodista.
Pyynnön runko
Pyynnön tekstin on oltava tyhjä.
Valtuutus
Vaatii vähintään yhden seuraavista OAuth 2.0 -laajuuksista: 
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
Vastaus
Jos onnistuu, vastauksen runko sisältää seuraavan rakenteen mukaisia ​​tietoja: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Lista hyllyistä.
nextPageToken
string
Tunnus seuraavan tulossivun hakemiseen. Ohjaa tämä arvo pageToken kenttään seuraavassa list kutsussa hakeaksesi seuraavan tulossivun.

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>
Pakottaa sisällysluetteloon
<h2> tai <h3> lisääminen taulukon otsikon ( <th> ) sisään pakottaa otsikon sisällysluetteloon, kuten tässä taulukossa. Taulukon otsikon sisällä <h2> ja <h3> on tyylitelty tavallisen tekstin tavoin, joten lukijat eivät voi kertoa.

Kiinteät asettelutaulukot

Jos sinulla on taulukoita, joiden sisältö on leveämpi kuin taulukon solu (kuten koodilohkot), voit pakottaa kyseisen sisällön sisältävät taulukon solut käyttämään ylivuotovieritystä taulukon soluihin sen sijaan, että koko taulukkoa vieritetään lisäämällä kiinteä luokka <table> -elementti:

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

Seuraava taulukko sisältää fixed luokan, ja sen soluissa on ylivuoto:

Renderoitu

Nimi Tyyppi Kuvaus
value String

Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Valinnan navigointityyppi

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>

Vertaa tätä alla olevaan taulukkoon, joka näyttää oletusasettelun, jossa ylivuotoa käytetään koko taulukkoon:

Renderoitu

Nimi Tyyppi Kuvaus
value String

Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType Valinnan navigointityyppi

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>

Sarakkeiden leveyden hallinta

Oletusarvoisesti kiinteän asettelun taulukot jakavat taulukon kokonaisleveyden tasaisesti jokaiselle sen sarakkeelle (eli kiinteän asettelun taulukossa, jossa on kolme saraketta, jokainen sarake on 33,33 % taulukon kokonaisleveydestä).

Renderoitu

Nimi Tyyppi Kuvaus
value String

Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Valinnan navigointityyppi

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>

Kiinteän asettelun taulukon sarakkeiden leveyden hallitsemiseksi taulukon ensimmäisen rivin soluissa on oltava jokin seuraavista:

Leveysattribuutti(t), joiden arvot ovat joko prosentteina ( 20% ) tai pikseleinä ( 240px ), <colgroup> -elementti, jossa on <col> -alaelementtejä, joihin on asetettu width . Parhaan tuloksen saavuttamiseksi älä aseta width viimeisessä <col> -elementissä tai viimeisessä taulukon solussa, koska selain laskee tämän arvon puolestasi.

Leveydet taulukon soluissa

Renderoitu

Nimi Tyyppi Kuvaus
value String

Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Valinnan navigointityyppi

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>

Leveydet päällä elementtejä

Renderoitu

Nimi Tyyppi Kuvaus
value String

Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Valinnan navigointityyppi

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>

Kiinteäasetteluiset reagoivat taulukot

Voit myös yhdistää kiinteän asettelun taulukoita reagoiviin taulukoihin, jos käytät <colgroup> ja <col> -vaihtoehtoa leveysmääritteiden asettamiseen: 

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

Renderoitu

Parametrit
value String
Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Valinnan navigointityyppi

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>

Täysleveät pöydät

DevSite tukee taulukoita, jotka kattavat sivun koko leveyden käyttämällä <table class="full-width">...</table> -toimintoa ylätason taulukoissa (eli taulukot, jotka ovat samalla hierarkkisella tasolla kuin sivujen otsikot):

Nimi Tyyppi Kuvaus
arvo merkkijono Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan
navigointityyppi PageNavigationType Valinnan navigointityyppi

Taulukot pystysuorilla säännöillä

Voit näyttää pystysuuntaiset säännöt taulukon rivin <th> ja <td> välillä käyttämällä <table class="vertical-rules">...</table> :

Nimi Tyyppi Kuvaus
arvo merkkijono Valinnan arvo, jonka vastaajat näkevät etikettinä lomaketta katsellessaan
navigointityyppi PageNavigationType Valinnan navigointityyppi

Teksti sarakkeissa

Voit järjestää tekstiä sarakkeisiin ja poistaa kaiken tyylin <table> -sovelluksesta käyttämällä <table class="columns">...</table> . Tätä käytetään tyypillisesti pitkien kapeiden listojen järjestämiseen.

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>

Pöydän värit

Vakiopöydät on värjätty kuten yllä, ja useita muita värejä on saatavana luokissa blue , cyan , green , orange , pink ja purple . 

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

Useita värejä yhdessä taulukossa ei tueta, mutta taulukon väriluokkien nimiä voidaan yhdistää muihin yllä mainittuihin taulukon luokkanimivaihtoehtoihin. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Sininen
key type
Muutama tieto key .
Syaani
key type
Muutama tieto key .
Vihreä
key type
Muutama tieto key .
Oranssi
key type
Muutama tieto key .
Vaaleanpunainen
key type
Muutama tieto key .
Violetti
key type
Muutama tieto key .

Vaihtoehtoiset rivin värit

Jos haluat vaihtaa taulukon rivin taustavärejä, lisää <table> -elementtiin alternating-odd-rows tai alternating-even-rows -luokka.

Vuorottelevat parittomat rivit 

<table class="alternating-odd-rows">
Nimi Kuvaus
Yksi kala Tämä on kuvaus One Fishista
Kaksi kalaa Tämä on kuvaus kahdesta kalasta
Punainen kala Tämä on kuvaus Red Fishistä
Sininen kala Tämä on kuvaus Blue Fishistä
Muut kalat Tämä on kuvaus muusta kalasta

Vuorottelevat parillisia rivejä

Tässä esimerkissä taulukon värien väriä sovelletaan myös taulukkoon green luokan kautta. 

<table class="alternating-even-rows green">
Nimi Kuvaus
Yksi kala Tämä on kuvaus One Fishistä
Kaksi kalaa Tämä on kuvaus kahdesta kalasta
Punainen kala Tämä on kuvaus Red Fishistä
Sininen kala Tämä on kuvaus Blue Fishistä
Muut kalat Tämä on kuvaus muusta kalasta