Tafels

Tabellen worden ondersteund met standaardopmaak. Hier is een typische tabel met een koprij, verschillende gewone rijen en een rij gemarkeerd als <tr class="alt"> , wat een donkerdere achtergrond oplevert die als alternatieve kop kan worden gebruikt.

Teruggegeven

Een Twee Drie
1,0 2.0 3.0
1.1 2.1 3.1
Hier volgen enkele cijfers die eindigen op .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>```

Responsieve tafels

DevSite ondersteunt responsieve tabellen die op kleinere schermen anders zijn ingedeeld. Hier is een normale referentietabel:

Teruggegeven

Naam Type Beschrijving
value String De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken
navigationType PageNavigationType Het navigatietype van de keuze

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>

En hier is dezelfde tabel, aangepast om class="responsive" te gebruiken. Als u het browservenster smaller maakt, wordt het verticaal weergegeven in plaats van horizontaal:

Teruggegeven

Parameters
value String
De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken
navigationType PageNavigationType
Het navigatietype van de keuze

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>

Om class="responsive" te gebruiken, moeten tabellen op een bepaalde manier gestructureerd zijn:

  • Er mogen slechts twee kolommen in de tabel staan: de eerste kolom voor de dingen die gedefinieerd worden (de sleutel), en de tweede kolom voor alle informatie over die sleutel, indien nodig in meerdere regels. Deze beperking met twee kolommen betekent dat responsieve tabellen niet kunnen worden gebruikt voor echt tweedimensionale tabelgegevens, op vinkjes gebaseerde vergelijking van functies, maar dat ze wel geschikt zijn voor referentie-informatie (of andere gegevens die redelijkerwijs kunnen worden uitgedrukt door een definitielijst in plaats van een tafel).
  • Als er meerdere regels met informatie over de sleutel zijn, bijvoorbeeld een type en een beschrijving, plaatst u elke regel tussen <p> om regeleinden te forceren (in plaats van <br> ).
  • Er mag slechts één cel in de koprij staan. Gebruik <th colspan="2"> om te forceren dat het beide kolommen omvat. Om u aan dit gedrag te herinneren, verbergt DevSite automatisch elke <th> na de eerste (die er opzettelijk erg slecht uitziet).

Deze techniek werkt ook voor zeer complexe tabellen, zelfs tabellen die geneste tabellen bevatten:

Teruggegeven

Details
Queryparameters
pageSize
int32
Gevraagd paginaformaat. Het kan zijn dat de server minder planken retourneert dan gevraagd. Indien niet gespecificeerd, zal de server een geschikte standaard kiezen.
pageToken
string
Een token dat een pagina met resultaten identificeert die de server moet retourneren. Normaal gesproken is dit de waarde van nextPageToken die wordt geretourneerd door de vorige aanroep naar de list .
Lichaam aanvragen
De aanvraagtekst moet leeg zijn.
Autorisatie
Vereist ten minste een van de volgende OAuth 2.0-bereiken: 
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
Antwoord
Als dit lukt, bevat de antwoordtekst gegevens met de volgende structuur: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
De lijst met planken.
nextPageToken
string
Een token om de volgende pagina met resultaten op te halen. Geef deze waarde door in het pageToken veld bij de volgende aanroep van de list om de volgende pagina met resultaten op te halen.

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>
Forceren in de inhoudsopgave
Als u een <h2> of <h3> in een tabelkop ( <th> ) plaatst, wordt de kop in de inhoudsopgave geforceerd, net als bij deze tabel. Binnen een tabelkop zijn <h2> en <h3> opgemaakt als gewone tekst, zodat lezers het niet kunnen zien.

Tafels met vaste indeling

Als u tabellen heeft met inhoud die breder is dan een tabelcel (zoals codeblokken), kunt u de tabelcellen met die inhoud dwingen om overflow-scrollen toe te passen op de tabelcellen in plaats van de hele tabel te laten scrollen door een vaste klasse toe te voegen aan het <table> -element:

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

De volgende tabel bevat de fixed klasse en er is overloop toegepast op de cellen:

Teruggegeven

Naam Type Beschrijving
value String

De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Het navigatietype van de keuze

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>

Vergelijk dit met de onderstaande tabel, waarin het standaard lay-outgedrag wordt weergegeven waarbij overloop wordt toegepast op de hele tabel:

Teruggegeven

Naam Type Beschrijving
value String

De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType Het navigatietype van de keuze

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>

Kolombreedtes beheren

Standaard verdelen tabellen met een vaste indeling de totale breedte van de tabel gelijkmatig over elk van de kolommen (dwz een tabel met een vaste indeling met drie kolommen geeft elke kolom weer op 33,33% van de totale breedte van de tabel).

Teruggegeven

Naam Type Beschrijving
value String

De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Het navigatietype van de keuze

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>

Om de breedte van de kolommen in een tabel met een vaste lay-out te bepalen, moeten de cellen in de eerste rij van de tabel een van de volgende elementen bevatten:

breedte attribuut(en) waarvan de waarden een percentage ( 20% ) of in pixels ( 240px ) zijn een <colgroup> element met <col> onderliggende elementen waarop width attribuut(en) zijn ingesteld. Voor de beste resultaten stelt u geen width op het laatste <col> -element of de laatste tabelcel, aangezien de browser deze waarde voor u berekent.

Breedten op tabelcellen

Teruggegeven

Naam Type Beschrijving
value String

De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Het navigatietype van de keuze

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>

Breedtes aan elementen

Teruggegeven

Naam Type Beschrijving
value String

De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Het navigatietype van de keuze

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>

Responsieve tabellen met een vaste indeling

U kunt tabellen met een vaste lay-out ook combineren met responsieve tabellen als u de optie <colgroup> en <col> gebruikt voor het instellen van breedte-attributen: 

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

Teruggegeven

Parameters
value String
De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Het navigatietype van de keuze

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>

Tafels over de volledige breedte

DevSite ondersteunt tabellen die de gehele breedte van de pagina bestrijken door <table class="full-width">...</table> te gebruiken op tabellen op het hoogste niveau (dwz tabellen op hetzelfde hiërarchische niveau als de paginakoppen):

Naam Type Beschrijving
waarde Snaar De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken
navigatieType PageNavigationType Het navigatietype van de keuze

Tabellen met verticale regels

U kunt verticale regels weergeven tussen elke <th> en <td> in een tabelrij door <table class="vertical-rules">...</table> te gebruiken:

Naam Type Beschrijving
waarde Snaar De waarde van de keuze, die respondenten zien als een label wanneer ze het formulier bekijken
navigatieType PageNavigationType Het navigatietype van de keuze

Tekst in kolommen

Je kunt tekst in kolommen rangschikken en alle opmaak uit een <table> verwijderen door <table class="columns">...</table> te gebruiken. Dit wordt meestal gebruikt voor het rangschikken van lange, smalle lijsten.

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>

Tafelkleuren

Standaardtabellen zijn gekleurd zoals hierboven, en er zijn verschillende andere kleuren beschikbaar in de klassen blue , cyan , green , orange , pink en purple . 

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

Meerdere kleuren binnen één tabel worden niet ondersteund, maar klassenamen voor tabelkleuren kunnen worden gecombineerd met de andere hierboven genoemde opties voor tabelklassen. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Blauw
key type
Wat informatie over de key .
Cyaan
key type
Wat informatie over de key .
Groente
key type
Wat informatie over de key .
Oranje
key type
Wat informatie over de key .
Roze
key type
Wat informatie over de key .
Paars
key type
Wat informatie over de key .

Wissel rijkleuren af

Om achtergrondrijkleuren in uw tabel af te wisselen, voegt u een klasse alternating-odd-rows of alternating-even-rows toe aan het <table> -element.

Afwisselende oneven rijen 

<table class="alternating-odd-rows">
Naam Beschrijving
Eén vis Dit is een beschrijving van One Fish
Twee vissen Dit is een beschrijving van Twee Vissen
Rode Vis Dit is een beschrijving van Rode Vis
Blauwe vis Dit is een beschrijving van Blue Fish
Andere vissen Dit is een beschrijving van Andere vissen

Afwisselende even rijen

In dit voorbeeld wordt via de klasse green ook een kleur uit tabelkleuren op de tabel toegepast. 

<table class="alternating-even-rows green">
Naam Beschrijving
Eén vis Dit is een beschrijving van One Fish
Twee vissen Dit is een beschrijving van Twee Vissen
Rode Vis Dit is een beschrijving van Rode Vis
Blauwe vis Dit is een beschrijving van Blue Fish
Andere vissen Dit is een beschrijving van Andere vissen