Tables

Les tables sont compatibles avec le balisage standard. Voici un tableau type avec une ligne d'en-tête, plusieurs lignes standards et une ligne marquée comme <tr class="alt">, qui produit un arrière-plan plus sombre pouvant être utilisé comme en-tête secondaire.

Rendu

One Deux Trois
1.0 2.0 3,0
1.1 2.1 3.1
Voici quelques nombres se terminant par .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>```

Tables responsives

DevSite est compatible avec les tableaux responsifs dont la mise en page est différente sur les écrans plus petits. Voici un tableau de référence normal:

Rendu

Nom Type Description
value String Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire
navigationType PageNavigationType Type de navigation du choix

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>

Voici le même tableau, adapté pour utiliser class="responsive". Si vous réduisez la fenêtre du navigateur, elle s'affiche verticalement plutôt que horizontalement:

Rendu

Paramètres
valueString
Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire
navigationTypePageNavigationType
Type de navigation du choix

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>

Pour utiliser class="responsive", les tables doivent être structurées d'une manière particulière:

  • La table ne doit comporter que deux colonnes: la première pour les éléments définis (la clé) et la seconde pour toutes les informations sur cette clé, sur plusieurs lignes si nécessaire. Cette restriction de deux colonnes signifie que les tableaux responsifs ne peuvent pas être utilisés pour des données tabulaires véritablement bidimensionnelles, ni pour comparer des fonctionnalités à l'aide de cases à cocher. En revanche, ils sont bien adaptés aux informations de référence (ou à toute autre donnée pouvant raisonnablement être exprimée par une liste de définitions plutôt que par un tableau).
  • Si plusieurs lignes d'informations sont fournies sur la clé (par exemple, un type et une description), encapsulez chaque ligne dans <p> pour forcer les retours à la ligne (au lieu de <br>).
  • La ligne d'en-tête ne doit comporter qu'une seule cellule. Utilisez <th colspan="2"> pour forcer la largeur à s'étendre sur les deux colonnes. Pour vous rappeler ce comportement, DevSite masque automatiquement tous les <th> après le premier (qui semble intentionnellement très défectueux).

Cette technique fonctionne également pour les tableaux très complexes, même ceux qui contiennent des tableaux imbriqués:

Rendu

Détails
Paramètres de requête
pageSize
int32
Taille de la page demandée. Le serveur peut renvoyer moins d'étagères que demandé. Si aucune valeur n'est spécifiée, le serveur sélectionne une valeur par défaut appropriée.
pageToken
string
Jeton identifiant une page de résultats que le serveur doit renvoyer. Il s'agit généralement de la valeur de nextPageToken renvoyée par l'appel précédent à la méthode list.
Corps de la requête
Le corps de la requête doit être vide.
Autorisation
Nécessite au moins l'un des champs d'application OAuth 2.0 suivants:
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
Réponse
Si la requête aboutit, le corps de la réponse contient des données qui ont la structure suivante:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Liste des étagères.
nextPageToken
string
Jeton permettant de récupérer la page de résultats suivante. Transmettez cette valeur dans le champ pageToken lors de l'appel suivant de la méthode list pour récupérer la page de résultats suivante.

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>
Forcer l'ajout dans la table des matières
Placer un <h2> ou un <h3> dans un en-tête de tableau (<th>) force l'en-tête dans la table des matières, comme dans ce tableau. Dans l'en-tête d'un tableau, <h2> et <h3> sont stylisés comme du texte normal, de sorte que les lecteurs ne puissent pas les distinguer.

Tables à mise en page fixe

Si vous avez des tableaux dont le contenu est plus large qu'une cellule de tableau (par exemple, des blocs de code), vous pouvez forcer les cellules de tableau contenant ce contenu à appliquer le défilement en cas de dépassement aux cellules de tableau au lieu de faire défiler l'ensemble du tableau en ajoutant une classe fixe à l'élément <table>:

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

Le tableau suivant inclut la classe fixed et un débordement est appliqué à ses cellules:

Rendu

Nom Type Description
value String

Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire

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

navigationType PageNavigationType Type de navigation du choix

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>

Comparez-le au tableau ci-dessous, qui montre le comportement de mise en page par défaut, où le débordement est appliqué à l'ensemble du tableau:

Rendu

Nom Type Description
value String

Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire

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

navigationType PageNavigationType Type de navigation du choix

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>

Contrôler les largeurs de colonne

Par défaut, les tableaux à mise en page fixe répartissent uniformément la largeur globale du tableau entre chacune de ses colonnes (c'est-à-dire qu'un tableau à mise en page fixe avec trois colonnes affiche chaque colonne à 33,33% de la largeur globale du tableau).

Rendu

Nom Type Description
value String

Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire

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

navigationType PageNavigationType Type de navigation du choix

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>

Pour contrôler la largeur des colonnes d'un tableau à mise en page fixe, les cellules de la première ligne du tableau doivent inclure l'un des éléments suivants:

Un ou plusieurs attributs de largeur dont les valeurs sont exprimées en pourcentage (20%) ou en pixels (240px)<colgroup><col><col>widthwidth

Largeurs des cellules de tableau

Rendu

Nom Type Description
value String

Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire

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

navigationType PageNavigationType Type de navigation du choix

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>

Largeurs des éléments

Rendu

Nom Type Description
value String

Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire

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

navigationType PageNavigationType Type de navigation du choix

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>

Tables responsives à mise en page fixe

Vous pouvez également combiner des tables à mise en page fixe avec des tables responsives si vous utilisez les options <colgroup> et <col> pour définir des attributs de largeur:

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

Rendu

Paramètres
valueString
Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Type de navigation du choix

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>

Tables en pleine largeur

DevSite prend en charge les tableaux qui couvrent toute la largeur de la page en utilisant <table class="full-width">...</table> sur les tableaux de niveau supérieur (c'est-à-dire les tableaux au même niveau hiérarchique que les titres de page):

Nom Type Description
valeur Chaîne Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire
navigationType PageNavigationType Type de navigation du choix

Tables avec des lignes verticales

Vous pouvez afficher des règles verticales entre chaque <th> et <td> d'une ligne de tableau à l'aide de <table class="vertical-rules">...</table>:

Nom Type Description
valeur Chaîne Valeur du choix, qui s'affiche sous forme de libellé pour les personnes interrogées lorsqu'elles consultent le formulaire
navigationType PageNavigationType Type de navigation du choix

Texte dans des colonnes

Vous pouvez organiser le texte en colonnes et supprimer tout style d'un <table> à l'aide de <table class="columns">...</table>. Elle est généralement utilisée pour organiser des listes longues et étroites.

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>

Couleurs du tableau

Les tables standards sont colorées comme ci-dessus. Plusieurs autres couleurs sont disponibles à l'aide des classes blue, cyan, green, orange, pink et purple.

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

Il n'est pas possible d'utiliser plusieurs couleurs dans une même table, mais les noms de classe de couleur de table peuvent être combinés avec les autres options de nom de classe de table mentionnées ci-dessus.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Bleu
key type
Quelques informations sur le key.
Cyan
key type
Quelques informations sur le key.
Vert
key type
Quelques informations sur le key.
Orange
key type
Quelques informations sur le key.
Pink
key type
Quelques informations sur le key.
Violet
key type
Quelques informations sur le key.

Couleurs alternées pour les lignes

Pour alterner les couleurs d'arrière-plan des lignes de votre tableau, ajoutez une classe alternating-odd-rows ou alternating-even-rows à l'élément <table>.

Lignes impaires alternées

<table class="alternating-odd-rows">
Nom Description
Un poisson Voici une description de One Fish
Deux poissons Voici une description de Two Fish.
Poisson rouge Voici une description du poisson rouge.
Poisson bleu Voici une description de Blue Fish.
Autres poissons Voici une description d'autres poissons

Lignes paires alternées

Dans cet exemple, une couleur des couleurs de tableau est également appliquée au tableau via la classe green.

<table class="alternating-even-rows green">
Nom Description
Un poisson Voici une description de One Fish
Deux poissons Voici une description de Two Fish.
Poisson rouge Voici une description du poisson rouge.
Poisson bleu Voici une description de Blue Fish.
Autres poissons Voici une description d'autres poissons