Taules

Les taules són compatibles amb el marcatge estàndard. Aquí hi ha una taula típica amb una fila d'encapçalament, diverses files regulars i una fila marcada com a <tr class="alt"> , que produeix un fons més fosc que es pot utilitzar com a capçalera alternativa.

Renderitzat

Un Dos Tres
1.0 2.0 3.0
1.1 2.1 3.1
Aquí vénen alguns números que acaben en .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>```

Taules responsives

DevSite admet taules sensibles que es distribueixen de manera diferent en pantalles més petites. Aquí teniu una taula de referència normal:

Renderitzat

Nom Tipus Descripció
value String El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari
navigationType PageNavigationType El tipus de navegació de l'elecció

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>

I aquí teniu la mateixa taula, adaptada per utilitzar class="responsive" . Si reduïu la finestra del navegador, es disposarà verticalment en lloc d'horitzontal:

Renderitzat

Paràmetres
value String
El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari
navigationType PageNavigationType
El tipus de navegació de l'elecció

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 utilitzar class="responsive" , les taules s'han d'estructurar d'una manera particular:

  • Només hi ha d'haver dues columnes a la taula: la primera columna per a les coses que s'estan definint (la clau) i la segona columna per a tota la informació sobre aquesta clau, en diverses línies si cal. Aquesta restricció de dues columnes significa que les taules responsives no es poden utilitzar per a dades tabulars realment bidimensionals, comparacions de funcions basades en marques de verificació, però són molt adequades per a informació de referència (o qualsevol altra dada que es pugui expressar raonablement mitjançant una llista de definicions en lloc de una taula).
  • Si hi ha diverses línies d'informació sobre la clau (per exemple, un tipus i una descripció), emboliqueu cada línia a <p> per forçar els salts de línia (en lloc de <br> ).
  • Només hi ha d'haver una cel·la a la fila de capçalera. Utilitzeu <th colspan="2"> per forçar-lo a abastar ambdues columnes. Per recordar-vos aquest comportament, DevSite amaga automàticament qualsevol <th> després del primer (que intencionadament sembla molt trencat).

Aquesta tècnica també funciona per a taules molt complexes, fins i tot aquelles que contenen taules imbricades:

Renderitzat

Detalls
Paràmetres de consulta
pageSize
int32
Mida de pàgina sol·licitada. El servidor pot tornar menys prestatges dels sol·licitats. Si no s'especifica, el servidor triarà un valor predeterminat adequat.
pageToken
string
Un testimoni que identifica una pàgina de resultats que el servidor hauria de retornar. Normalment, aquest és el valor de nextPageToken retornat del mètode de crida a list anterior.
Cos de la sol·licitud
El cos de la sol·licitud ha d'estar buit.
Autorització
Requereix almenys un dels àmbits d'OAuth 2.0 següents: 
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
Resposta
Si té èxit, el cos de resposta conté dades amb l'estructura següent: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
La llista de prestatges.
nextPageToken
string
Un testimoni per recuperar la pàgina següent de resultats. Passeu aquest valor al camp pageToken a la trucada posterior al mètode list per recuperar la pàgina següent de resultats.

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>
Forçar la taula de continguts
Posar un <h2> o <h3> dins de la capçalera d'una taula ( <th> ) forçarà la capçalera a la taula de continguts, com passa amb aquesta taula. Dins de la capçalera d'una taula, <h2> i <h3> tenen un estil de text normal, de manera que els lectors no ho podran dir.

Taules de distribució fixa

Si teniu taules amb contingut que és més ample que una cel·la de taula (com ara blocs de codi), podeu forçar les cel·les de la taula amb aquest contingut a aplicar el desplaçament de desbordament a les cel·les de la taula en lloc de fer que tota la taula es desplaci afegint una classe fixa a l'element <table> :

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

La taula següent inclou la classe fixed i s'ha aplicat el desbordament a les seves cel·les:

Renderitzat

Nom Tipus Descripció
value String

El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType El tipus de navegació de l'elecció

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>

Compareu-ho amb la taula següent que mostra el comportament de disseny predeterminat on el desbordament s'aplica a tota la taula:

Renderitzat

Nom Tipus Descripció
value String

El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType El tipus de navegació de l'elecció

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>

Control de l'amplada de columnes

Per defecte, les taules de disseny fix distribueixen uniformement l'amplada total de la taula a cadascuna de les seves columnes (és a dir, una taula de disseny fix amb tres columnes mostra cada columna al 33,33% de l'amplada total de la taula).

Renderitzat

Nom Tipus Descripció
value String

El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType El tipus de navegació de l'elecció

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 controlar l'amplada de les columnes en una taula de disseny fix, les cel·les de la primera fila de la taula han d'incloure un dels següents:

atribut(s) d'amplada els valors dels quals són un percentatge ( 20% ) o en píxels ( 240px ) un element <colgroup> amb <col> elements secundaris que tenen atributs width establerts Per obtenir els millors resultats, no establiu un width a l'últim element <col> o darrera cel·la de la taula, ja que el navegador us calcula aquest valor.

Amplades a les cel·les de la taula

Renderitzat

Nom Tipus Descripció
value String

El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType El tipus de navegació de l'elecció

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>

Amplades activades elements

Renderitzat

Nom Tipus Descripció
value String

El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType El tipus de navegació de l'elecció

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>

Taules sensibles de disseny fix

També podeu combinar taules de disseny fix amb taules responsives si feu servir l'opció <colgroup> i <col> per establir atributs d'amplada: 

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

Renderitzat

Paràmetres
value String
El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
El tipus de navegació de l'elecció

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>

Taules d'amplada completa

DevSite admet taules que abasten tota l'amplada de la pàgina utilitzant <table class="full-width">...</table> a les taules de nivell superior (és a dir, taules al mateix nivell jeràrquic que els encapçalaments de les pàgines):

Nom Tipus Descripció
valor Corda El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari
tipus de navegació PageNavigationType El tipus de navegació de l'elecció

Taules amb regles verticals

Podeu mostrar regles verticals entre cada <th> i <td> en una fila de taula utilitzant <table class="vertical-rules">...</table> :

Nom Tipus Descripció
valor Corda El valor de l'elecció, que els enquestats veuen com una etiqueta quan visualitzen el formulari
tipus de navegació PageNavigationType El tipus de navegació de l'elecció

Text en columnes

Podeu organitzar el text en columnes i eliminar tots els estils d'una <table> utilitzant <table class="columns">...</table> . Normalment s'utilitza per organitzar llistes llargues i estretes.

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>

Colors de la taula

Les taules estàndard tenen els colors anteriors i hi ha diversos altres colors disponibles utilitzant les classes blue , cyan , green , orange , pink i purple . 

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

No s'admeten diversos colors dins d'una mateixa taula, però els noms de classe de colors de la taula es poden combinar amb les altres opcions de nom de classe de taula esmentades anteriorment. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Blau
key type
Alguna informació sobre la key .
Cian
key type
Alguna informació sobre la key .
Verd
key type
Alguna informació sobre la key .
Taronja
key type
Alguna informació sobre la key .
Rosa
key type
Alguna informació sobre la key .
Lila
key type
Alguna informació sobre la key .

Alterna els colors de la fila

Per alternar els colors de les files de fons a la vostra taula, afegiu una classe de alternating-odd-rows o alternating-even-rows a l'element <table> .

Alternant files senars 

<table class="alternating-odd-rows">
Nom Descripció
Un peix Aquesta és una descripció de One Fish
Dos peixos Aquesta és una descripció de Two Fish
Peix Roig Aquesta és una descripció del peix vermell
Peix Blau Aquesta és una descripció de Blue Fish
Altres peixos Aquesta és una descripció d'Altres peixos

Alternant files parells

En aquest exemple, un color dels colors de la taula també s'aplica a la taula mitjançant la classe green . 

<table class="alternating-even-rows green">
Nom Descripció
Un peix Aquesta és una descripció de One Fish
Dos peixos Aquesta és una descripció de Two Fish
Peix Roig Aquesta és una descripció del peix vermell
Peix Blau Aquesta és una descripció de Blue Fish
Altres peixos Aquesta és una descripció d'Altres peixos