Tablas

Las tablas son compatibles con el marcado estándar. Esta es una tabla típica con una fila de encabezado, varias filas normales y una fila marcada como <tr class="alt">, que produce un fondo más oscuro que se puede usar como encabezado alternativo.

Procesado

Uno Dos Tres
1.0 2.0 3.0
1.1 2.1 3.1
Estos son algunos números que terminan 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>```

Tablas responsivas

DevSite admite tablas responsivas que se organizan de forma diferente en pantallas más pequeñas. Esta es una tabla de referencia normal:

Procesado

Nombre Tipo Descripción
value String Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario.
navigationType PageNavigationType El tipo de navegación de la opción

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>

Esta es la misma tabla, adaptada para usar class="responsive". Si reduces la ventana del navegador, se organizará verticalmente en lugar de horizontalmente:

Procesado

Parámetros
valueString
Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario.
navigationTypePageNavigationType
El tipo de navegación de la opción

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>

Para usar class="responsive", las tablas deben estructurarse de una manera particular:

  • Solo debe haber dos columnas en la tabla: la primera para los elementos que se definen (la clave) y la segunda para toda la información sobre esa clave, en varias líneas si es necesario. Esta restricción de dos columnas significa que las tablas responsivas no se pueden usar para datos tabulares verdaderamente bidimensionales, ni para la comparación de atributos basados en marcas de verificación, pero son adecuadas para la información de referencia (o cualquier otro dato que se pueda expresar de manera razonable con una lista de definiciones en lugar de una tabla).
  • Si hay varias líneas de información sobre la clave (por ejemplo, un tipo y una descripción), une cada línea en <p> para forzar los saltos de línea (en lugar de <br>).
  • Solo debe haber una celda en la fila del encabezado. Usa <th colspan="2"> para forzar que abarque ambas columnas. Para recordarte este comportamiento, DevSite oculta automáticamente cualquier <th> después del primero (que se ve muy dañado de forma intencional).

Esta técnica también funciona para tablas muy complejas, incluso aquellas que contienen tablas anidadas:

Procesado

Detalles
Parámetros de consulta
pageSize
int32
Indica el tamaño de la página solicitada. Es posible que el servidor devuelva menos bibliotecas de las solicitadas. Si no se especifica, el servidor elegirá una configuración predeterminada adecuada.
pageToken
string
Un token que identifica una página de resultados que debe mostrar el servidor. Por lo general, este es el valor de nextPageToken que se muestra de la llamada anterior al método list.
Cuerpo de la solicitud
El cuerpo de la solicitud debe estar vacío.
Autorización
Se requiere al menos uno de los siguientes permisos de 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
Respuesta
Si se ejecuta correctamente, el cuerpo de la respuesta contendrá datos con la siguiente estructura:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
La lista de bibliotecas
nextPageToken
string
Un token para recuperar la siguiente página de resultados. Pasa este valor en el campo pageToken en la llamada posterior al método list para recuperar la siguiente página de resultados.

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>
Cómo forzar el índice
Si colocas un <h2> o <h3> dentro de un encabezado de tabla (<th>), se forzará el encabezado en el índice, como en esta tabla. Dentro del encabezado de una tabla, <h2> y <h3> tienen el mismo diseño que el texto normal, por lo que los lectores no podrán distinguirlos.

Tablas de diseño fijo

Si tienes tablas con contenido más ancho que una celda de tabla (como bloques de código), puedes forzar a que las celdas de tabla con ese contenido apliquen el desplazamiento de desbordamiento a las celdas de tabla en lugar de que se desplace toda la tabla. Para ello, agrega una clase fija al elemento <table>:

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

La siguiente tabla incluye la clase fixed y tiene desbordamiento aplicado a sus celdas:

Procesado

Nombre Tipo Descripción
value String

Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario.

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

navigationType PageNavigationType El tipo de navegación de la opción

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>

Compara esto con la siguiente tabla, que muestra el comportamiento predeterminado del diseño en el que se aplica el desbordamiento a toda la tabla:

Procesado

Nombre Tipo Descripción
value String

Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario.

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

navigationType PageNavigationType El tipo de navegación de la opción

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>

Cómo controlar los anchos de las columnas

De forma predeterminada, las tablas de diseño fijo distribuyen de forma uniforme el ancho general de la tabla a cada una de sus columnas (es decir, una tabla de diseño fijo con tres columnas muestra cada columna en el 33.33% del ancho general de la tabla).

Procesado

Nombre Tipo Descripción
value String

Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario.

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

navigationType PageNavigationType El tipo de navegación de la opción

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>

Para controlar el ancho de las columnas en una tabla de diseño fijo, las celdas de la primera fila de la tabla deben incluir una de las siguientes opciones:

Atributos de ancho cuyos valores son un porcentaje (20%) o en píxeles (240px) Un elemento <colgroup> con elementos secundarios <col> que tienen atributos width configurados Para obtener mejores resultados, no configures un width en el último elemento <col> o en la última celda de la tabla, ya que el navegador calcula este valor por ti.

Anchos de las celdas de la tabla

Procesado

Nombre Tipo Descripción
value String

Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario.

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

navigationType PageNavigationType El tipo de navegación de la opción

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>

Anchos de los elementos

Procesado

Nombre Tipo Descripción
value String

Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario.

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

navigationType PageNavigationType El tipo de navegación de la opción

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>

Tablas responsivas de diseño fijo

También puedes combinar tablas de diseño fijo con tablas responsivas si usas la opción <colgroup> y <col> para configurar atributos de ancho:

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

Procesado

Parámetros
valueString
Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario. 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
El tipo de navegación de la opción

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>

Tablas de ancho total

DevSite admite tablas que abarcan todo el ancho de la página con el uso de <table class="full-width">...</table> en tablas de nivel superior (es decir, tablas en el mismo nivel jerárquico que los encabezados de página):

Nombre Tipo Descripción
valor String Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario.
navigationType PageNavigationType El tipo de navegación de la opción

Tablas con reglas verticales

Puedes mostrar reglas verticales entre cada <th> y <td> en una fila de la tabla con <table class="vertical-rules">...</table>:

Nombre Tipo Descripción
valor String Es el valor de la opción, que los encuestados ven como una etiqueta cuando ven el formulario.
navigationType PageNavigationType El tipo de navegación de la opción

Texto en columnas

Puedes organizar el texto en columnas y quitar todos los estilos de un <table> con <table class="columns">...</table>. Por lo general, se usa para organizar listas largas y estrechas.

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>

Colores de la tabla

Las tablas estándar se colorean como se indicó anteriormente, y hay varios otros colores disponibles con las clases blue, cyan, green, orange, pink y purple.

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

No se admiten varios colores en una sola tabla, pero los nombres de clase de color de la tabla se pueden combinar con las otras opciones de nombres de clase de tabla mencionadas anteriormente.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Azul
key type
Información sobre key.
Cian
key type
Información sobre key.
Verde
key type
Información sobre key.
Orange
key type
Información sobre key.
Rosa
key type
Información sobre key.
Púrpura
key type
Información sobre key.

Colores de fila alternados

Para alternar los colores de fondo de las filas de la tabla, agrega una clase alternating-odd-rows o alternating-even-rows al elemento <table>.

Filas impares alternadas

<table class="alternating-odd-rows">
Nombre Descripción
Un pez Esta es una descripción de One Fish
Dos peces Esta es una descripción de Dos peces
Red Fish Esta es una descripción de Red Fish
Blue Fish Esta es una descripción de Blue Fish
Otros peces Esta es una descripción de Otros peces

Filas pares alternadas

En este ejemplo, también se aplica un color de los colores de la tabla a la tabla a través de la clase green.

<table class="alternating-even-rows green">
Nombre Descripción
Un pez Esta es una descripción de One Fish
Dos peces Esta es una descripción de Dos peces
Red Fish Esta es una descripción de Red Fish
Blue Fish Esta es una descripción de Blue Fish
Otros peces Esta es una descripción de Otros peces