mize

Tabele so podprte s standardnim označevanjem. Tukaj je tipična tabela z naslovno vrstico, več običajnimi vrsticami in vrstico, označeno kot <tr class="alt"> , ki ustvari temnejše ozadje, ki se lahko uporablja kot alternativna glava.

Upodobljeno

ena Dva tri
1.0 2.0 3.0
1.1 2.1 3.1
Tukaj je nekaj številk, ki se končajo na .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>```

Odzivne mize

DevSite podpira odzivne tabele, ki so na manjših zaslonih razporejene drugače. Tukaj je običajna referenčna tabela:

Upodobljeno

Ime Vrsta Opis
value String Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec
navigationType PageNavigationType Vrsta izbire navigacije

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>

In tukaj je ista tabela, prilagojena za uporabo class="responsive" . Če okno brskalnika zožite, bo postavljeno navpično namesto vodoravno:

Upodobljeno

Parametri
value String
Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec
navigationType PageNavigationType
Vrsta izbire navigacije

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>

Za uporabo class="responsive" morajo biti tabele strukturirane na poseben način:

  • V tabeli morata biti samo dva stolpca: prvi stolpec za stvari, ki se definirajo (ključ), in drugi stolpec za vse informacije o tem ključu, po potrebi v več vrsticah. Ta omejitev dveh stolpcev pomeni, da odzivnih tabel ni mogoče uporabiti za resnično dvodimenzionalne tabelarične podatke, primerjavo funkcij na podlagi kljukic, vendar so zelo primerne za referenčne informacije (ali katere koli druge podatke, ki bi jih lahko razumno izrazili s seznamom definicij namesto mizo).
  • Če obstaja več vrstic informacij o ključu – recimo vrsta in opis – zavijte vsako vrstico v <p> da vsilite prelome vrstic (namesto <br> ).
  • V vrstici glave mora biti samo ena celica. Uporabite <th colspan="2"> , da ga prisilite, da zajema oba stolpca. Da bi vas opomnil na to vedenje, DevSite samodejno skrije vsak <th> za prvim (kar je namerno videti zelo pokvarjeno).

Ta tehnika deluje tudi za zelo zapletene tabele, tudi tiste, ki vsebujejo ugnezdene tabele:

Upodobljeno

Podrobnosti
Parametri poizvedbe
pageSize
int32
Zahtevana velikost strani. Strežnik lahko vrne manj polic, kot je zahtevano. Če ni določeno, bo strežnik izbral ustrezno privzeto vrednost.
pageToken
string
Žeton, ki identificira stran z rezultati, ki naj bi jo strežnik vrnil. Običajno je to vrednost nextPageToken vrnjena iz prejšnje metode klica na list .
Telo zahteve
Telo zahteve mora biti prazno.
Pooblastilo
Zahteva vsaj enega od naslednjih obsegov 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
Odziv
Če je uspešen, telo odziva vsebuje podatke z naslednjo strukturo: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Seznam polic.
nextPageToken
string
Žeton za pridobitev naslednje strani z rezultati. Posredujte to vrednost v polje pageToken v naslednjem klicu metode list , da pridobite naslednjo stran z rezultati.

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>
Siljenje v kazalo
Če vstavite <h2> ali <h3> v glavo tabele ( <th> ), boste glavo prisilili v kazalo vsebine, kot pri tej tabeli. Znotraj glave tabele sta <h2> in <h3> oblikovana kot navadno besedilo, tako da bralci tega ne bodo vedeli.

Tabele s fiksno postavitvijo

Če imate tabele z vsebino, ki je širša od celice tabele (kot so bloki kode), lahko celice tabele s to vsebino prisilite, da za celice tabele uporabijo prelivno pomikanje, namesto da bi se pomikala celotna tabela, tako da dodate fiksni razred v element <table> :

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

Naslednja tabela vključuje fixed razred in ima v svojih celicah uporabljeno prelivanje:

Upodobljeno

Ime Vrsta Opis
value String

Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Vrsta izbire navigacije

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>

Primerjajte to s spodnjo tabelo, ki prikazuje privzeto vedenje postavitve, kjer je prelivanje uporabljeno za celotno tabelo:

Upodobljeno

Ime Vrsta Opis
value String

Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType Vrsta izbire navigacije

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>

Nadzor širine stolpcev

Tabele s fiksno postavitvijo privzeto enakomerno porazdelijo skupno širino tabele na vsak njen stolpec (tj. tabela s fiksno postavitvijo s tremi stolpci prikaže vsak stolpec na 33,33 % celotne širine tabele).

Upodobljeno

Ime Vrsta Opis
value String

Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Vrsta izbire navigacije

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>

Za nadzor širine stolpcev v tabeli s fiksno postavitvijo morajo celice v prvi vrstici tabele vsebovati eno od naslednjega:

atributi širine, katerih vrednosti so bodisi odstotek ( 20% ) bodisi v slikovnih pikah ( 240px ) element <colgroup> s podrejenimi elementi <col> ki imajo nastavljene atribute width . Za najboljše rezultate ne nastavite width zadnjega elementa <col> ali zadnje celice tabele, saj brskalnik izračuna to vrednost namesto vas.

Širine celic tabele

Upodobljeno

Ime Vrsta Opis
value String

Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Vrsta izbire navigacije

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>

Širine vklopljene elementi

Upodobljeno

Ime Vrsta Opis
value String

Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Vrsta izbire navigacije

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>

Odzivne tabele s fiksno postavitvijo

Tabele s fiksno postavitvijo lahko kombinirate tudi z odzivnimi tabelami , če uporabite možnost <colgroup> in <col> za nastavitev atributov širine: 

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

Upodobljeno

Parametri
value String
Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Vrsta izbire navigacije

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>

Tabele polne širine

DevSite podpira tabele, ki obsegajo celotno širino strani z uporabo <table class="full-width">...</table> na tabelah najvišje ravni (tj. tabele na isti hierarhični ravni kot naslovi strani):

Ime Vrsta Opis
vrednost Niz Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec
navigationType PageNavigationType Vrsta izbire navigacije

Tabele z navpičnimi pravili

Navpična pravila med vsakim <th> in <td> v vrstici tabele lahko prikažete z uporabo <table class="vertical-rules">...</table> :

Ime Vrsta Opis
vrednost Niz Vrednost izbire, ki jo anketiranci vidijo kot oznako, ko gledajo obrazec
navigationType PageNavigationType Vrsta izbire navigacije

Besedilo v stolpcih

Besedilo lahko razporedite po stolpcih in odstranite vse sloge iz <table> z uporabo <table class="columns">...</table> . To se običajno uporablja za urejanje dolgih ozkih seznamov.

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>

Barve za mizo

Standardne tabele so obarvane kot zgoraj, več drugih barv pa je na voljo z uporabo razredov blue , cyan , green , orange , pink in purple . 

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

Več barv znotraj ene tabele ni podprtih, vendar je mogoče kombinirati imena razredov barv tabel z drugimi zgoraj omenjenimi možnostmi imen razredov tabel. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Modra
key type
Nekaj ​​informacij o key .
Cyan
key type
Nekaj ​​informacij o key .
zelena
key type
Nekaj ​​informacij o key .
Oranžna
key type
Nekaj ​​informacij o key .
Roza
key type
Nekaj ​​informacij o key .
Vijolična
key type
Nekaj ​​informacij o key .

Nadomestne barve vrstic

Če želite zamenjati barve vrstice ozadja v tabeli, elementu <table> dodajte razred alternating-odd-rows ali alternating-even-rows .

Izmenične lihe vrstice 

<table class="alternating-odd-rows">
Ime Opis
Ena riba To je opis One Fish
Dve ribi To je opis igre Two Fish
Rdeča riba To je opis rdeče ribe
Modra riba To je opis Blue Fish
Druge ribe To je opis Druge ribe

Izmenično sode vrstice

V tem primeru je barva iz barv tabele uporabljena tudi za tabelo prek green razreda. 

<table class="alternating-even-rows green">
Ime Opis
Ena riba To je opis One Fish
Dve ribi To je opis igre Two Fish
Rdeča riba To je opis rdeče ribe
Modra riba To je opis Blue Fish
Druge ribe To je opis Druge ribe