Tabele

Tabele są obsługiwane za pomocą standardowego znacznika. Oto typowa tabela z wierszem nagłówka, kilkoma wierszami standardowymi i wierszem oznaczonym jako <tr class="alt">, który ma ciemniejsze tło i może być używany jako alternatywny nagłówek.

Renderowany

Jeden Dwa Trzy
1,0 2,0 3,0
1.1 2.1 3.1
Oto kilka liczb, które kończą się na 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>```

Tabele elastyczne

DevSite obsługuje tabele elastyczne, które są wyświetlane w inny sposób na mniejszych ekranach. Oto zwykła tabela referencyjna:

Renderowany

Nazwa Typ Opis
value String wartość wyboru, która jest widoczna dla respondentów jako etykieta podczas wyświetlania formularza.
navigationType PageNavigationType Typ nawigacji

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 to ta sama tabela, ale z użyciem funkcji class="responsive". Jeśli zwęzisz okno przeglądarki, będzie ono wyświetlane w orientacji pionowej, a nie poziomej:

Renderowanie

Parametry
valueString
Wartość wyboru, którą respondenci widzą jako etykietę podczas wyświetlania formularza.
navigationTypePageNavigationType
Typ nawigacji

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>

Aby korzystać z class="responsive", tabele muszą być uporządkowane w określony sposób:

  • W tabeli muszą znajdować się tylko 2 kolumny: pierwsza dla definiowanych elementów (klucz), a druga dla wszystkich informacji o tym kluczu, w razie potrzeby na wielu wierszach. To ograniczenie dotyczące dwóch kolumn oznacza, że tabele responsywne nie mogą być używane do prawdziwie dwuwymiarowych danych tabelarycznych ani do porównywania funkcji na podstawie znaczników wyboru. Są one jednak odpowiednie do informacji referencyjnych (lub innych danych, które można sensownie wyrazić za pomocą listy definicji zamiast tabeli).
  • Jeśli informacje o kluczu zajmują kilka wierszy (np. typ i opis), użyj znaku <p>, aby wymusić wcięcia wiersza (zamiast znaku <br>).
  • W wierszu nagłówka może znajdować się tylko 1 komórka. Użyj <th colspan="2">, aby zmusić go do rozciągnięcia się na obie kolumny. Aby przypomnieć Ci o tym zachowaniu, DevSite automatycznie ukrywa wszystkie <th> po pierwszym (który celowo wygląda bardzo nieprawidłowo).

Ta metoda sprawdza się również w przypadku bardzo skomplikowanych tabel, nawet tych, które zawierają tabele zagnieżdżone:

Renderowany

Szczegóły
Parametry zapytania
pageSize
int32
Żądany rozmiar strony. Serwer może zwrócić mniej półek niż żądana liczba. Jeśli nie zostanie określony, serwer wybierze odpowiedni domyślny.
pageToken
string
Token identyfikujący stronę wyników, którą serwer powinien zwrócić. Zwykle jest to wartość nextPageToken zwrócona przez poprzednie wywołanie metody list.
Treść żądania
Treść żądania musi być pusta.
Autoryzacja
Wymaga co najmniej jednego z tych zakresów 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
Odpowiedź
W przypadku powodzenia treść odpowiedzi zawiera dane o tej strukturze:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Lista półek.
nextPageToken
string
Token umożliwiający pobranie następnej strony wyników. Przekaż tę wartość w polu pageToken w kolejnych wywołaniach metody list, aby pobrać kolejną stronę wyników.

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>
Wymuszanie spisu treści
Umieszczenie elementu <h2> lub <h3> wewnątrz nagłówka tabeli (<th>) spowoduje umieszczenie nagłówka w spisie treści, tak jak w tej tabeli. W nagłówku tabeli <h2> i <h3> mają styl zwykłego tekstu, więc czytelnicy nie będą w stanie ich odróżnić.

Tabele o stałym układzie

Jeśli masz tabele z treścią szerszą niż komórka tabeli (np. bloki kodu), możesz wymusić przewijanie komórek tabeli z treścią, zamiast przewijać całą tabelę. Aby to zrobić, dodaj do elementu <table> klasę stałą:

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

Poniższa tabela zawiera klasę fixed, a jej komórki mają zastosowany przepełnienie:

Renderowany

Nazwa Typ Opis
value String

wartość wyboru, która jest widoczna dla respondentów jako etykieta podczas wyświetlania formularza.

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

navigationType PageNavigationType Typ nawigacji

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>

Porównaj to z tabelą poniżej, która pokazuje domyślne zachowanie układu, gdy przepełnienie jest stosowane do całej tabeli:

Renderowany

Nazwa Typ Opis
value String

wartość wyboru, która jest widoczna dla respondentów jako etykieta podczas wyświetlania formularza.

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

navigationType PageNavigationType Typ nawigacji

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>

Sterowanie szerokością kolumn

Domyślnie tabele o układem stałym równomiernie rozkładają całkowitą szerokość tabeli na poszczególne kolumny (czyli tabela o układzie stałym z 3 kolumnami wyświetla każdą kolumnę z 33,33% całkowitej szerokości tabeli).

Renderowany

Nazwa Typ Opis
value String

wartość wyboru, która jest widoczna dla respondentów jako etykieta podczas wyświetlania formularza.

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

navigationType PageNavigationType Typ nawigacji

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>

Aby kontrolować szerokość kolumn w tabeli o stałym układzie, komórki w pierwszym wierszu tabeli muszą zawierać jedną z tych opcji:

atrybuty width, których wartości są wyrażone w procentach (20%) lub w pikselach (240px); element <colgroup> z elementami podrzędnymi <col>, które mają ustawione atrybuty width; Aby uzyskać najlepsze wyniki, nie ustawiaj atrybutu width w ostatnim elemencie <col> ani w ostatniej komórce tabeli, ponieważ przeglądarka oblicza tę wartość za Ciebie.

Szerokość komórek tabeli

Renderowanie

Nazwa Typ Opis
value String

wartość wyboru, która jest widoczna dla respondentów jako etykieta podczas wyświetlania formularza.

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

navigationType PageNavigationType Typ nawigacji

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>

Szerokość elementów

Renderowany

Nazwa Typ Opis
value String

wartość wyboru, która jest widoczna dla respondentów jako etykieta podczas wyświetlania formularza.

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

navigationType PageNavigationType Typ nawigacji

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>

Tabele o stałym układzie i elastyczne tabele

Możesz też łączyć tabele o stałym układzie z tabelami elastycznymi, jeśli użyjesz opcji <colgroup> i <col> do ustawienia atrybutów szerokości:

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

Renderowanie

Parametry
valueString
Wartość wyboru, którą respondenci widzą jako etykietę podczas wyświetlania formularza.
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Typ nawigacji

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>

tabele o pełnej szerokości,

DevSite obsługuje tabele, które zajmują całą szerokość strony, dzięki użyciu <table class="full-width">...</table> w tabelach najwyższego poziomu (czyli tabelach na tym samym poziomie hierarchii co nagłówki strony):

Nazwa Typ Opis
wartość Ciąg znaków wartość wyboru, która jest widoczna dla respondentów jako etykieta podczas wyświetlania formularza.
navigationType PageNavigationType Typ nawigacji

Tabele z regułami pionowymi

Aby wyświetlić pionowe linie między elementami <th> i <td> w wierszu tabeli, użyj elementu <table class="vertical-rules">...</table>:

Nazwa Typ Opis
wartość Ciąg znaków wartość wyboru, która jest widoczna dla respondentów jako etykieta podczas wyświetlania formularza.
navigationType PageNavigationType Typ nawigacji

Tekst w kolumnach

Możesz ustawić tekst w kolumnach i usunąć wszystkie style z elementu <table>, korzystając z elementu <table class="columns">...</table>. Jest to zwykle używane do układania długich, wąskich list.

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>

Kolory tabeli

Standardowe tabele są kolorowane zgodnie z opisem powyżej. Dostępne są też inne kolory, które można uzyskać za pomocą klas blue, cyan, green, orange, pink i purple.

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

Nie można używać wielu kolorów w ramach jednej tabeli, ale nazwy klas kolorów tabeli można łączyć z innymi wymienionymi powyżej opcjami nazw klas.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Niebieski
key type
Niektóre informacje o key.
Cyjan
key type
Niektóre informacje o key.
Zielony
key type
Niektóre informacje o key.
Orange
key type
Niektóre informacje o key.
Różowy
key type
Niektóre informacje o key.
Fioletowy
key type
Niektóre informacje o key.

Naprzemienne kolory wierszy

Aby zmieniać kolory tła wierszy w tabeli, dodaj klasę alternating-odd-rows lub alternating-even-rows do elementu <table>.

Naprzemienne wiersze nieparzyste

<table class="alternating-odd-rows">
Nazwa Opis
One Fish Opis One Fish
Two Fish To jest opis Two Fish
Red Fish Opis czerwonej ryby
Blue Fish To jest opis Blue Fish
Inne ryby Opis innych ryb

Naprzemienne parzyste wiersze

W tym przykładzie kolor z tabeli kolorów jest również stosowany do tabeli za pomocą klasy green.

<table class="alternating-even-rows green">
Nazwa Opis
One Fish Opis One Fish
Two Fish To jest opis Two Fish
Red Fish Opis czerwonej ryby
Blue Fish To jest opis Blue Fish
Inne ryby Opis innych ryb