Tabelas

As tabelas são compatíveis com a marcação padrão. Esta é uma tabela típica com uma linha de título, várias linhas normais e uma linha marcada como <tr class="alt">, que produz um plano de fundo mais escuro que pode ser usado como um cabeçalho alternativo.

Renderizado

Um Dois Três
1,0 2,0 3.0
1.1 2.1 3.1
Confira alguns números que terminam em .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>```

Tabelas responsivas

O DevSite oferece suporte a tabelas responsivas que são dispostas de maneira diferente em telas menores. Confira uma tabela de referência normal:

Renderizado

Nome Tipo Descrição
value String O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário
navigationType PageNavigationType O tipo de navegação da escolha

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 é a mesma tabela, adaptada para usar class="responsive". Se você diminuir a janela do navegador, ela será exibida na vertical em vez da horizontal:

Renderizado

Parâmetros
valueString
O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário
navigationTypePageNavigationType
O tipo de navegação da escolha

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", as tabelas precisam ser estruturadas de uma maneira específica:

  • A tabela precisa ter apenas duas colunas: a primeira para as coisas que estão sendo definidas (a chave) e a segunda para todas as informações sobre essa chave, em várias linhas, se necessário. Essa restrição de duas colunas significa que as tabelas responsivas não podem ser usadas para dados tabulares bidimensionais, comparação de recursos com base em marcações de seleção, mas são adequadas para informações de referência (ou qualquer outro dado que possa ser razoavelmente expresso por uma lista de definições em vez de uma tabela).
  • Se houver várias linhas de informações sobre a chave, por exemplo, um tipo e uma descrição, use <p> para forçar quebras de linha (em vez de <br>).
  • Deve haver apenas uma célula na linha do cabeçalho. Use <th colspan="2"> para forçar a span entre as duas colunas. Para lembrar você desse comportamento, o DevSite oculta automaticamente qualquer <th> depois do primeiro, que intencionalmente parece muito quebrado.

Essa técnica também funciona para tabelas muito complexas, mesmo aquelas que contêm tabelas aninhadas:

Renderizado

Detalhes
Parâmetros de consulta
pageSize
int32
Tamanho da página solicitada. O servidor pode retornar menos prateleiras do que o solicitado. Se não for especificado, o servidor vai escolher um padrão adequado.
pageToken
string
Um token que identifica a página de resultados que o servidor retornará. Normalmente, esse é o valor de nextPageToken retornado da chamada anterior para o método list.
Corpo da solicitação
O corpo da solicitação precisa estar vazio.
Autorização
Requer pelo menos um dos seguintes escopos do 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
Resposta
Se bem-sucedido, o corpo da resposta conterá dados com a seguinte estrutura:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
A lista de prateleiras.
nextPageToken
string
Token para recuperar a próxima página de resultados. Transmita esse valor no campo pageToken na chamada subsequente para o método list para recuperar a próxima 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>
Como forçar o sumário
Colocar um <h2> ou <h3> dentro de um cabeçalho de tabela (<th>) força o cabeçalho na tabela de conteúdos, como nesta tabela. No cabeçalho de uma tabela, <h2> e <h3> têm o mesmo estilo do texto normal, para que os leitores não percebam a diferença.

Tabelas de layout fixo

Se você tiver tabelas com conteúdo mais amplo que uma célula (como blocos de código), é possível forçar as células com esse conteúdo a aplicar a rolagem de overflow a elas em vez de rolar a tabela inteira. Para isso, adicione uma classe fixa ao elemento <table>:

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

A tabela a seguir inclui a classe fixed e tem o overflow aplicado às células:

Renderizado

Nome Tipo Descrição
value String

O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário

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

navigationType PageNavigationType O tipo de navegação da escolha

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>

Compare isso com a tabela abaixo, que mostra o comportamento padrão do layout em que o overflow é aplicado a toda a tabela:

Renderizado

Nome Tipo Descrição
value String

O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário

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

navigationType PageNavigationType O tipo de navegação da escolha

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>

Como controlar a largura das colunas

Por padrão, as tabelas de layout fixo distribuem uniformemente a largura geral da tabela para cada uma das colunas. Ou seja, uma tabela de layout fixo com três colunas exibe cada coluna em 33,33% da largura geral da tabela.

Renderizado

Nome Tipo Descrição
value String

O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário

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

navigationType PageNavigationType O tipo de navegação da escolha

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 a largura das colunas em uma tabela de layout fixo, as células da primeira linha da tabela precisam incluir uma das seguintes opções:

Atributos de largura cujos valores são uma porcentagem (20%) ou em pixels (240px) Um elemento <colgroup> com elementos filhos <col> que têm atributos width definidos Para ter os melhores resultados, não defina um width no último elemento <col> ou na última célula da tabela, já que o navegador calcula esse valor para você.

Larguras em células de tabela

Renderizado

Nome Tipo Descrição
value String

O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário

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

navigationType PageNavigationType O tipo de navegação da escolha

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>

Larguras em elementos

Renderizado

Nome Tipo Descrição
value String

O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário

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

navigationType PageNavigationType O tipo de navegação da escolha

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>

Tabelas responsivas de layout fixo

Também é possível combinar tabelas de layout fixo com tabelas responsivas se você usar a opção <colgroup> e <col> para definir atributos de largura:

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

Renderizado

Parâmetros
valueString
O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
O tipo de navegação da escolha

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>

Tabelas de largura total

O DevSite oferece suporte a tabelas que abrangem toda a largura da página usando <table class="full-width">...</table> em tabelas de nível superior (ou seja, tabelas no mesmo nível hierárquico dos títulos da página):

Nome Tipo Descrição
valor String O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário
navigationType PageNavigationType O tipo de navegação da escolha

Tabelas com regras verticais

É possível mostrar linhas verticais entre cada <th> e <td> em uma linha de tabela usando <table class="vertical-rules">...</table>:

Nome Tipo Descrição
valor String O valor da escolha, que os respondentes veem como um rótulo ao visualizar o formulário
navigationType PageNavigationType O tipo de navegação da escolha

Texto em colunas

É possível organizar o texto em colunas e remover todo o estilo de uma <table> usando <table class="columns">...</table>. Isso é normalmente usado para organizar listas longas e estreitas.

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>

Cores da tabela

As tabelas padrão são coloridas como acima, e várias outras cores estão disponíveis usando as classes blue, cyan, green, orange, pink e purple.

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

Não é possível usar várias cores em uma única tabela, mas os nomes de classe de cores de tabela podem ser combinados com as outras opções de nome de classe de tabela mencionadas acima.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Azul
key type
Algumas informações sobre o key.
Ciano
key type
Algumas informações sobre o key.
Verde
key type
Algumas informações sobre o key.
Orange
key type
Algumas informações sobre o key.
Rosa
key type
Algumas informações sobre o key.
Roxo
key type
Algumas informações sobre o key.

Cores de linha alternadas

Para alternar as cores de plano de fundo da tabela, adicione uma classe alternating-odd-rows ou alternating-even-rows ao elemento <table>.

Linhas ímpares alternadas

<table class="alternating-odd-rows">
Nome Descrição
One Fish Esta é uma descrição de One Fish
Two Fish Esta é uma descrição da Two Fish
Peixe vermelho Esta é uma descrição do Red Fish
Blue Fish Esta é uma descrição da Blue Fish
Outros peixes Esta é uma descrição de Other Fish

Linhas pares alternadas

Neste exemplo, uma cor de cores da tabela também é aplicada à tabela pela classe green.

<table class="alternating-even-rows green">
Nome Descrição
One Fish Esta é uma descrição de One Fish
Two Fish Esta é uma descrição da Two Fish
Peixe vermelho Esta é uma descrição do Red Fish
Blue Fish Esta é uma descrição da Blue Fish
Outros peixes Esta é uma descrição de Other Fish