Tabellen

Tabellen werden mit Standard-Markup unterstützt. Hier sehen Sie eine typische Tabelle mit einer Kopfzeile, mehreren normalen Zeilen und einer Zeile, die als <tr class="alt"> gekennzeichnet ist. Dadurch wird ein dunklerer Hintergrund erzeugt, der als alternative Überschrift verwendet werden kann.

Gerendert

One Zwei Drei
1.0 2.0 3
1.1 2.1 3.1
Hier sind einige Zahlen, die auf .2 enden.
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>```

Responsive Tabellen

DevSite unterstützt responsive Tabellen, die auf kleineren Bildschirmen anders dargestellt werden. Hier ist eine normale Referenztabelle:

Gerendert

Name Typ Beschreibung
value String Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird
navigationType PageNavigationType Der Navigationstyp der Auswahl

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>

Und hier ist dieselbe Tabelle, angepasst für die Verwendung von class="responsive". Wenn Sie das Browserfenster verkleinern, wird es vertikal statt horizontal angezeigt:

Gerendert

Parameter
valueString
Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird
navigationTypePageNavigationType
Navigationstyp der Auswahl

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>

Für die Verwendung von class="responsive" müssen Tabellen auf eine bestimmte Weise strukturiert sein:

  • Die Tabelle darf nur zwei Spalten enthalten: die erste Spalte für die zu definierenden Elemente (den Schlüssel) und die zweite Spalte für alle Informationen zu diesem Schlüssel, gegebenenfalls in mehreren Zeilen. Aufgrund dieser Einschränkung auf zwei Spalten können responsive Tabellen nicht für wirklich zweidimensionale Tabellendaten oder einen anhand von Häkchen durchgeführten Funktionsvergleich verwendet werden. Sie eignen sich jedoch gut für Referenzinformationen oder andere Daten, die vernünftigerweise durch eine Definitionliste anstelle einer Tabelle ausgedrückt werden könnten.
  • Wenn es mehrere Zeilen mit Informationen zum Schlüssel gibt, z. B. einen Typ und eine Beschreibung, schließen Sie jede Zeile in <p> ein, um einen Zeilenumbruch zu erzwingen (anstelle von <br>).
  • Die Kopfzeile darf nur eine Zelle enthalten. Mit <th colspan="2"> können Sie festlegen, dass er sich über beide Spalten erstrecken soll. Zur Erinnerung an dieses Verhalten werden alle <th> nach dem ersten automatisch ausgeblendet. Das sieht absichtlich sehr unvollständig aus.

Diese Methode funktioniert auch für sehr komplexe Tabellen, auch für solche, die verschachtelte Tabellen enthalten:

Gerendert

Details
Abfrageparameter
pageSize
int32
Angeforderte Seitengröße. Der Server gibt möglicherweise weniger Regale zurück, als angefordert. Wenn keine Angabe gemacht wird, wählt der Server einen geeigneten Standardwert aus.
pageToken
string
Ein Token, das eine Ergebnisseite identifiziert, die der Server liefern soll. Normalerweise ist dies der Wert von nextPageToken, der vom vorherigen Aufruf der list-Methode zurückgegeben wurde.
Anfragetext
Der Anfragetext muss leer sein.
Autorisierung
Erfordert mindestens einen der folgenden OAuth 2.0-Bereiche:
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
Antwort
Bei Erfolg enthält der Antworttext Daten mit der folgenden Struktur:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Die Liste der Regale.
nextPageToken
string
Ein Token zum Abrufen der nächsten Ergebnisseite. Übergeben Sie diesen Wert im Feld pageToken im nachfolgenden Aufruf der list-Methode, um die nächste Ergebnisseite abzurufen.

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>
Einfügen in Inhaltsverzeichnis erzwingen
Wenn Sie ein <h2> oder <h3> in eine Tabellenüberschrift (<th>) einfügen, wird die Überschrift in das Inhaltsverzeichnis aufgenommen, wie in dieser Tabelle. In einer Tabellenüberschrift werden <h2> und <h3> wie normaler Text formatiert, sodass Leser sie nicht unterscheiden können.

Tabellen mit festem Layout

Wenn Sie Tabellen mit Inhalten haben, die breiter als eine Tabellenzelle sind (z. B. Codeblöcke), können Sie festlegen, dass für die Tabellenzellen mit diesem Inhalt ein Überlaufscrolling angewendet wird, anstatt die gesamte Tabelle zu scrollen. Dazu fügen Sie dem <table>-Element eine feste Klasse hinzu:

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

Die folgende Tabelle enthält die Klasse fixed und die Zellen haben den Überlauf-Attributwert:

Gerendert

Name Typ Beschreibung
value String

Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird

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

navigationType PageNavigationType Der Navigationstyp der Auswahl

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>

Vergleichen Sie das mit der Tabelle unten, in der das Standardlayoutverhalten zu sehen ist, bei dem der Überlauf auf die gesamte Tabelle angewendet wird:

Gerendert

Name Typ Beschreibung
value String

Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird

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

navigationType PageNavigationType Der Navigationstyp der Auswahl

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>

Spaltenbreiten steuern

Bei Tabellen mit festem Layout wird die Gesamtbreite der Tabelle standardmäßig gleichmäßig auf alle Spalten verteilt. In einer Tabelle mit drei Spalten hat also jede Spalte eine Breite von 33,33% der Gesamtbreite der Tabelle.

Gerendert

Name Typ Beschreibung
value String

Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird

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

navigationType PageNavigationType Der Navigationstyp der Auswahl

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>

Wenn Sie die Breite der Spalten in einer Tabelle mit festem Layout steuern möchten, müssen die Zellen in der ersten Zeile der Tabelle Folgendes enthalten:

width-Attribut(e), deren Werte entweder als Prozentsatz (20%) oder in Pixeln (240px) angegeben sind ein <colgroup>-Element mit <col>-untergeordneten Elementen, für die width-Attribute festgelegt sind Für optimale Ergebnisse sollten Sie für das letzte <col>-Element oder die letzte Tabellenzelle kein width festlegen, da der Browser diesen Wert für Sie berechnet.

Breite von Tabellenzellen

Gerendert

Name Typ Beschreibung
value String

Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird

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

navigationType PageNavigationType Der Navigationstyp der Auswahl

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>

Breite von Elementen

Gerendert

Name Typ Beschreibung
value String

Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird

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

navigationType PageNavigationType Der Navigationstyp der Auswahl

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>

Responsive Tabellen mit festem Layout

Sie können Tabellen mit festem Layout auch mit responsiven Tabellen kombinieren, wenn Sie die Optionen <colgroup> und <col> zum Festlegen von Breitenattributen verwenden:

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

Gerendert

Parameter
valueString
Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Navigationstyp der Auswahl

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>

Tabellen in voller Breite

DevSite unterstützt Tabellen, die die gesamte Breite der Seite einnehmen. Dazu wird <table class="full-width">...</table> für Tabellen der obersten Ebene verwendet (d. h. Tabellen auf derselben Hierarchieebene wie Seitenüberschriften):

Name Typ Beschreibung
Wert String Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird
navigationType PageNavigationType Der Navigationstyp der Auswahl

Tabellen mit vertikalen Linien

Mit <table class="vertical-rules">...</table> können Sie vertikale Linien zwischen den einzelnen <th> und <td> in einer Tabellenzeile anzeigen:

Name Typ Beschreibung
Wert String Der Wert der Auswahl, der den Teilnehmern im Formular als Label angezeigt wird
navigationType PageNavigationType Der Navigationstyp der Auswahl

Text in Spalten

Mit <table class="columns">...</table> können Sie Text in Spalten anordnen und alle Stile aus einem <table> entfernen. Diese Option wird in der Regel für lange, schmale Listen verwendet.

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>

Tabellenfarben

Standardtabellen sind wie oben dargestellt gefärbt. Mit den Klassen blue, cyan, green, orange, pink und purple sind mehrere weitere Farben verfügbar.

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

Mehrere Farben innerhalb einer einzelnen Tabelle werden nicht unterstützt. Klassennamen für Tabellenfarben können jedoch mit den oben genannten Optionen für Tabellenklassennamen kombiniert werden.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Blau
key type
 Weitere Informationen zum key
Cyan
key type
 Weitere Informationen zum key
Grün
key type
 Weitere Informationen zum key
Orange
key type
 Weitere Informationen zum key
Rosa
key type
 Weitere Informationen zum key
Lila
key type
 Weitere Informationen zum key

Abwechselnde Zeilenfarben

Wenn Sie die Hintergrundfarben der Zeilen in Ihrer Tabelle abwechseln möchten, fügen Sie dem <table>-Element die Klasse alternating-odd-rows oder alternating-even-rows hinzu.

Ungeregelte Zeilen im Wechsel

<table class="alternating-odd-rows">
Name Beschreibung
One Fish Dies ist eine Beschreibung von One Fish
Two Fish Dies ist eine Beschreibung von Two Fish
Roter Fisch Dies ist eine Beschreibung von Roter Fisch
Blue Fish Dies ist eine Beschreibung von Blue Fish
Sonstige Fische Dies ist eine Beschreibung von Sonstige Fische

Gerade Zeilen im Wechsel

In diesem Beispiel wird über die Klasse green auch eine Farbe aus Tabellenfarben auf die Tabelle angewendet.

<table class="alternating-even-rows green">
Name Beschreibung
One Fish Dies ist eine Beschreibung von One Fish
Two Fish Dies ist eine Beschreibung von Two Fish
Roter Fisch Dies ist eine Beschreibung von Roter Fisch
Blue Fish Dies ist eine Beschreibung von Blue Fish
Sonstige Fische Dies ist eine Beschreibung von Sonstige Fische