Tabelle

Le tabelle sono supportate con il markup standard. Ecco una tabella tipica con una riga di intestazione, diverse righe regolari e una riga contrassegnata come <tr class="alt">, che produce uno sfondo più scuro che può essere utilizzato come intestazione alternativa.

Renderizzato

Uno Due Tre
1.0 2.0 3,0
1.1 2.1 3.1
Ecco alcuni numeri che terminano con .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>```

Tabelle responsive

DevSite supporta tabelle responsive che hanno un layout diverso su schermi più piccoli. Ecco una normale tabella di riferimento:

Renderizzato

Nome Tipo Descrizione
value String Il valore della scelta, che gli intervistati vedono come etichetta quando visualizzano il modulo
navigationType PageNavigationType Il tipo di navigazione della scelta

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>

Ed ecco la stessa tabella, adattata per l'utilizzo di class="responsive". Se restringi la finestra del browser, questa verrà visualizzata in verticale anziché in orizzontale:

Renderizzato

Parametri
valueString
Il valore della scelta, visualizzato dagli intervistati come etichetta quando visualizzano il modulo
navigationTypePageNavigationType
Il tipo di navigazione della scelta

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>

Per utilizzare class="responsive", le tabelle devono essere strutturate in un determinato modo:

  • La tabella deve contenere solo due colonne: la prima per gli elementi da definire (la chiave) e la seconda per tutte le informazioni sulla chiave, in più righe se necessario. Questa limitazione di due colonne significa che le tabelle responsive non possono essere utilizzate per dati tabulari veramente bidimensionali, confronti delle funzionalità basati su caselle di controllo, ma sono molto adatte per informazioni di riferimento (o per qualsiasi altro dato che potrebbe essere ragionevolmente espresso da un elenco di definizioni anziché da una tabella).
  • Se sono presenti più righe di informazioni sulla chiave, ad esempio un tipo e una descrizione, inserisci un a capo in ogni riga con <p> per forzare gli a capo (anziché <br>).
  • La riga dell'intestazione deve contenere una sola cella. Utilizza <th colspan="2"> per forzarne l'applicazione a entrambe le colonne. Per ricordarti questo comportamento, DevSite nasconde automaticamente tutti i <th> dopo il primo (che sembra intenzionalmente molto danneggiato).

Questa tecnica funziona anche per tabelle molto complesse, anche quelle che contengono tabelle nidificate:

Renderizzato

Dettagli
Parametri di query
pageSize
int32
Dimensioni della pagina richiesta. Il server potrebbe restituire meno sezioni rispetto a quelle richieste. Se non viene specificato, il server sceglierà un valore predefinito appropriato.
pageToken
string
Un token che identifica una pagina di risultati che il server deve restituire. In genere, si tratta del valore di nextPageToken restituito dalla chiamata precedente al metodo list.
Corpo della richiesta
Il corpo della richiesta deve essere vuoto.
Autorizzazione
Richiede almeno uno dei seguenti ambiti 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
Risposta
In caso di esito positivo, il corpo della risposta contiene dati con la seguente struttura:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
L'elenco delle sezioni.
nextPageToken
string
Un token per recuperare la pagina dei risultati successiva. Passa questo valore nel campo pageToken nella chiamata successiva al metodo list per recuperare la pagina di risultati successiva.

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>
Inserimento forzato nel sommario
Se inserisci <h2> o <h3> all'interno di un'intestazione di tabella (<th>), l'intestazione verrà inserita forzatamente nel sommario, come in questa tabella. All'interno di un'intestazione di tabella, <h2> e <h3> hanno lo stesso stile del testo normale, quindi i lettori non saranno in grado di distinguerli.

Tabelle con layout fisso

Se hai tabelle con contenuti più larghi di una cella di tabella (ad esempio blocchi di codice), puoi forzare l'applicazione dello scorrimento con overflow alle celle di tabella con questi contenuti anziché allo scorrimento dell'intera tabella aggiungendo una classe fissa all'elemento <table>:

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

La tabella seguente include la classe fixed e ha un overflow applicato alle celle:

Renderizzato

Nome Tipo Descrizione
value String

Il valore della scelta, che gli intervistati vedono come etichetta quando visualizzano il modulo

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

navigationType PageNavigationType Il tipo di navigazione della scelta

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>

Confronta questo con la tabella seguente che mostra il comportamento predefinito del layout in cui lo spazio aggiuntivo viene applicato all'intera tabella:

Renderizzato

Nome Tipo Descrizione
value String

Il valore della scelta, che gli intervistati vedono come etichetta quando visualizzano il modulo

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

navigationType PageNavigationType Il tipo di navigazione della scelta

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>

Controllare le larghezze delle colonne

Per impostazione predefinita, le tabelle con layout fisso distribuiscono uniformemente la larghezza complessiva della tabella a ciascuna delle sue colonne (ad es. una tabella con layout fisso con tre colonne mostra ogni colonna al 33,33% della larghezza complessiva della tabella).

Renderizzato

Nome Tipo Descrizione
value String

Il valore della scelta, che gli intervistati vedono come etichetta quando visualizzano il modulo

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

navigationType PageNavigationType Il tipo di navigazione della scelta

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>

Per controllare la larghezza delle colonne in una tabella con layout fisso, le celle della prima riga della tabella devono includere uno dei seguenti elementi:

uno o più attributi width i cui valori sono una percentuale (20%) o in pixel (240px) un elemento <colgroup> con elementi secondari <col> che hanno uno o più attributi width impostati Per risultati ottimali, non impostare un attributo width sull'ultimo elemento <col> o sull'ultima cella della tabella, poiché il browser calcola questo valore per te.

Larghezze nelle celle della tabella

Renderizzato

Nome Tipo Descrizione
value String

Il valore della scelta, che gli intervistati vedono come etichetta quando visualizzano il modulo

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

navigationType PageNavigationType Il tipo di navigazione della scelta

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>

Larghezza degli elementi

Renderizzato

Nome Tipo Descrizione
value String

Il valore della scelta, che gli intervistati vedono come etichetta quando visualizzano il modulo

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

navigationType PageNavigationType Il tipo di navigazione della scelta

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>

Tabelle responsive con layout fisso

Puoi anche combinare le tabelle con layout fisso con le tabelle responsive se utilizzi l'opzione <colgroup> e <col> per impostare gli attributi di larghezza:

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

Renderizzato

Parametri
valueString
Il valore della scelta, che i partecipanti vedono come etichetta quando visualizzano il modulo 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Il tipo di navigazione della scelta

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>

Tabelle a larghezza intera

DevSite supporta le tabelle che occupano l'intera larghezza della pagina utilizzando <table class="full-width">...</table> nelle tabelle di primo livello (ovvero le tabelle allo stesso livello gerarchico delle intestazioni di pagina):

Nome Tipo Descrizione
valore Stringa Il valore della scelta, che gli intervistati vedono come etichetta quando visualizzano il modulo
navigationType PageNavigationType Il tipo di navigazione della scelta

Tabelle con regole verticali

Puoi visualizzare linee verticali tra ogni <th> e <td> in una riga di tabella utilizzando <table class="vertical-rules">...</table>:

Nome Tipo Descrizione
valore Stringa Il valore della scelta, che gli intervistati vedono come etichetta quando visualizzano il modulo
navigationType PageNavigationType Il tipo di navigazione della scelta

Testo in colonne

Puoi organizzare il testo in colonne e rimuovere tutti gli stili da un <table> utilizzando <table class="columns">...</table>. Questo tipo di ordinamento viene in genere utilizzato per organizzare elenchi lunghi e stretti.

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>

Colori tabella

Le tabelle standard sono colorate come sopra e sono disponibili diversi altri colori utilizzando le classi blue, cyan, green, orange, pink e purple.

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

Non sono supportati più colori all'interno di una singola tabella, ma i nomi delle classi dei colori delle tabelle possono essere combinati con le altre opzioni di nomi delle classi delle tabelle sopra menzionate.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Blu
key type
Alcune informazioni su key.
Ciano
key type
Alcune informazioni su key.
di colore verde
key type
Alcune informazioni su key.
Orange
key type
Alcune informazioni su key.
Rosa
key type
Alcune informazioni su key.
Viola
key type
Alcune informazioni su key.

Colori alternati delle righe

Per alternare i colori di sfondo delle righe nella tabella, aggiungi una classe alternating-odd-rows o alternating-even-rows all'elemento <table>.

Righe dispari alternate

<table class="alternating-odd-rows">
Nome Descrizione
One Fish Questa è una descrizione di One Fish
Due pesci Questa è una descrizione di Due pesci
Pesce rosso Questa è una descrizione di Pesce rosso
Pesce azzurro Questa è una descrizione di Pesce blu
Altri pesci Questa è una descrizione di Pesci vari

Righe pari alternate

In questo esempio, un colore dei colori della tabella viene applicato anche alla tabella tramite la classe green.

<table class="alternating-even-rows green">
Nome Descrizione
One Fish Questa è una descrizione di One Fish
Due pesci Questa è una descrizione di Due pesci
Pesce rosso Questa è una descrizione di Pesce rosso
Pesce azzurro Questa è una descrizione di Pesce blu
Altri pesci Questa è una descrizione di Pesci vari