Mese

Tabelele sunt acceptate cu marcaj standard. Iată un tabel tipic cu un rând de antet, mai multe rânduri obișnuite și un rând marcat ca <tr class="alt"> , care produce un fundal mai întunecat care poate fi folosit ca antet alternativ.

Redat

Unul Două Trei
1.0 2.0 3.0
1.1 2.1 3.1
Iată câteva numere care se termină în .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>```

Tabele receptive

DevSite acceptă tabele receptive care se afișează diferit pe ecrane mai mici. Iată un tabel de referință normal:

Redat

Nume Tip Descriere
value String Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul
navigationType PageNavigationType Tipul de navigare al alegerii

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 iată același tabel, adaptat pentru a utiliza class="responsive" . Dacă restrângeți fereastra browserului, aceasta se va așeza pe verticală și nu pe orizontală:

Redat

Parametrii
value String
Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul
navigationType PageNavigationType
Tipul de navigare al alegerii

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>

Pentru a utiliza class="responsive" , tabelele trebuie să fie structurate într-un anumit mod:

  • În tabel trebuie să existe doar două coloane: prima coloană pentru lucrurile care sunt definite (cheia) și a doua coloană pentru toate informațiile despre acea cheie, în mai multe rânduri dacă este necesar. Această restricție pe două coloane înseamnă că tabelele receptive nu pot fi folosite pentru date tabelare cu adevărat bidimensionale, compararea caracteristicilor bazate pe bifă, dar sunt potrivite pentru informații de referință (sau orice alte date care ar putea fi exprimate în mod rezonabil printr-o listă de definiții în loc de o masă).
  • Dacă există mai multe rânduri de informații despre cheie - să zicem, un tip și o descriere - înfășurați fiecare linie în <p> pentru a forța întreruperea rândului (în loc de <br> ).
  • Trebuie să existe o singură celulă în rândul antetului. Folosiți <th colspan="2"> pentru a forța să se întinde pe ambele coloane. Pentru a vă aminti acest comportament, DevSite ascunde automat orice <th> după primul (care în mod intenționat pare foarte stricat).

Această tehnică funcționează și pentru tabele foarte complexe, chiar și pentru cele care conțin tabele imbricate:

Redat

Detalii
Parametrii de interogare
pageSize
int32
Dimensiunea paginii solicitată. Serverul poate returna mai puține rafturi decât a cerut. Dacă nu este specificat, serverul va alege o valoare implicită adecvată.
pageToken
string
Un simbol care identifică o pagină de rezultate pe care serverul ar trebui să o returneze. De obicei, aceasta este valoarea nextPageToken returnată de la metoda de apelare anterioară la list .
Corpul cererii
Corpul cererii trebuie să fie gol.
Autorizare
Necesită cel puțin unul dintre următoarele domenii 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
Răspuns
Dacă are succes, corpul răspunsului conține date cu următoarea structură: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Lista de rafturi.
nextPageToken
string
Un simbol pentru a prelua următoarea pagină de rezultate. Treceți această valoare în câmpul pageToken în apelul ulterior la metoda list pentru a prelua următoarea pagină de rezultate.

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țarea în cuprinsul
Introducerea unui <h2> sau <h3> în interiorul antetului unui tabel ( <th> ) va forța antetul să intre în cuprins, la fel ca în acest tabel. În interiorul antetului unui tabel, <h2> și <h3> sunt stilate ca textul obișnuit, astfel încât cititorii nu vor putea spune.

Tabele cu aspect fix

Dacă aveți tabele cu conținut care este mai lat decât o celulă de tabel (cum ar fi blocurile de cod), puteți forța celulele tabelului cu acel conținut să aplice derulare depășită celulelor tabelului în loc să derulați întregul tabel prin adăugarea unei clase fixe la elementul <table> :

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

Următorul tabel include clasa fixed ​​și are aplicat overflow celulelor sale:

Redat

Nume Tip Descriere
value String

Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Tipul de navigare al alegerii

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ți acest lucru cu tabelul de mai jos, care arată comportamentul implicit de aspect în care depășirea este aplicată întregului tabel:

Redat

Nume Tip Descriere
value String

Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType Tipul de navigare al alegerii

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>

Controlul lățimii coloanelor

În mod implicit, tabelele cu aspect fix distribuie uniform lățimea totală a tabelului în fiecare dintre coloanele sale (adică, un tabel cu aspect fix cu trei coloane afișează fiecare coloană la 33,33% din lățimea totală a tabelului).

Redat

Nume Tip Descriere
value String

Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Tipul de navigare al alegerii

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>

Pentru a controla lățimea coloanelor dintr-un tabel cu aspect fix, celulele din primul rând al tabelului trebuie să includă unul dintre următoarele:

atribut(e) de lățime ale căror valori sunt fie un procent ( 20% ), fie în pixeli ( 240px ) un element <colgroup> cu <col> elemente copil care au atribut(e) width setate pentru ele Pentru cele mai bune rezultate, nu setați un width ultimului element <col> sau a ultimei celule de tabel, deoarece browserul calculează această valoare pentru dvs.

Lățimi pe celulele tabelului

Redat

Nume Tip Descriere
value String

Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Tipul de navigare al alegerii

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>

Lățimi pe elemente

Redat

Nume Tip Descriere
value String

Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Tipul de navigare al alegerii

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>

Tabele receptive cu aspect fix

De asemenea, puteți combina tabele cu aspect fix cu tabele receptive dacă utilizați opțiunea <colgroup> și <col> pentru setarea atributelor de lățime: 

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

Redat

Parametrii
value String
Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Tipul de navigare al alegerii

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>

Mese cu lățime completă

DevSite acceptă tabele care acoperă întreaga lățime a paginii utilizând <table class="full-width">...</table> pe tabele de nivel superior (adică, tabele la același nivel ierarhic ca titlurile paginii):

Nume Tip Descriere
valoare Şir Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul
NavigationType PageNavigationType Tipul de navigare al alegerii

Tabele cu reguli verticale

Puteți afișa reguli verticale între fiecare <th> și <td> într-un rând de tabel folosind <table class="vertical-rules">...</table> :

Nume Tip Descriere
valoare Şir Valoarea alegerii, pe care respondenții o văd ca o etichetă atunci când vizualizează formularul
NavigationType PageNavigationType Tipul de navigare al alegerii

Text în coloane

Puteți aranja textul în coloane și puteți elimina toate stilurile dintr-un <table> folosind <table class="columns">...</table> . Acesta este de obicei folosit pentru aranjarea listelor lungi și înguste.

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>

Culorile meselor

Tabelele standard sunt colorate ca mai sus și sunt disponibile alte câteva culori folosind clasele blue , cyan , green , orange , pink și purple . 

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

Mai multe culori dintr-un singur tabel nu sunt acceptate, dar numele de clasă de culori ale tabelului pot fi combinate cu celelalte opțiuni de nume de clasă de tabel menționate mai sus. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Albastru
key type
Câteva informații despre key .
Cyan
key type
Câteva informații despre key .
Verde
key type
Câteva informații despre key .
Portocale
key type
Câteva informații despre key .
Roz
key type
Câteva informații despre key .
Violet
key type
Câteva informații despre key .

Alternează culorile rândurilor

Pentru a alterna culorile rândurilor de fundal în tabelul dvs., adăugați o clasă de alternating-odd-rows sau alternating-even-rows la elementul <table> .

Alternând rânduri impare 

<table class="alternating-odd-rows">
Nume Descriere
Un pește Aceasta este o descriere a One Fish
Doi pești Aceasta este o descriere a lui Two Fish
Pește Roșu Aceasta este o descriere a Red Fish
Pește albastru Aceasta este o descriere a Blue Fish
Alți pești Aceasta este o descriere a altor pești

Alternând rânduri egale

În acest exemplu, o culoare din culorile tabelului este, de asemenea, aplicată tabelului prin clasa green . 

<table class="alternating-even-rows green">
Nume Descriere
Un pește Aceasta este o descriere a One Fish
Doi pești Aceasta este o descriere a lui Two Fish
Pește Roșu Aceasta este o descriere a Red Fish
Pește albastru Aceasta este o descriere a Blue Fish
Alți pești Aceasta este o descriere a altor pești