Tablice

Tablice su podržane standardnim označavanjem. Ovdje je tipična tablica s retkom naslova, nekoliko običnih redaka i redom označenim kao <tr class="alt"> , koji proizvodi tamniju pozadinu koja se može koristiti kao alternativno zaglavlje.

Renderirano

Jedan Dva Tri
1.0 2.0 3.0
1.1 2.1 3.1
Evo nekoliko brojeva koji završavaju 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>```

Responzivni stolovi

DevSite podržava responzivne tablice koje izgledaju drugačije na manjim zaslonima. Evo normalne referentne tablice:

Renderirano

Ime Tip Opis
value String Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac
navigationType PageNavigationType Vrsta navigacije po izboru

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 ovdje je ista tablica, prilagođena za korištenje class="responsive" . Ako suzite prozor preglednika, rasporedit će se okomito umjesto vodoravno:

Renderirano

Parametri
value String
Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac
navigationType PageNavigationType
Vrsta navigacije po izboru

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>

Da biste koristili class="responsive" , tablice moraju biti strukturirane na određeni način:

  • U tablici moraju postojati samo dva stupca: prvi stupac za stvari koje se definiraju (ključ), a drugi stupac za sve informacije o tom ključu, u više redaka ako je potrebno. Ovo ograničenje u dva stupca znači da se responzivne tablice ne mogu koristiti za istinski dvodimenzionalne tablične podatke, usporedbu značajki na temelju kvačica, ali su dobro prikladne za referentne informacije (ili bilo koje druge podatke koji bi se razumno mogli izraziti popisom definicija umjesto stol).
  • Ako postoji više redaka informacija o ključu — recimo, vrsti i opisu — zamotajte svaki redak u <p> da biste forsirali prijelome redaka (umjesto <br> ).
  • U retku zaglavlja mora postojati samo jedna ćelija. Upotrijebite <th colspan="2"> da ga prisilite da obuhvati oba stupca. Da vas podsjeti na ovo ponašanje, DevSite automatski skriva svaki <th> nakon prvog (što namjerno izgleda vrlo pokvareno).

Ova tehnika također funkcionira za vrlo složene tablice, čak i one koje sadrže ugniježđene tablice:

Renderirano

pojedinosti
Parametri upita
pageSize
int32
Tražena veličina stranice. Poslužitelj može vratiti manje polica od traženog. Ako nije navedeno, poslužitelj će odabrati odgovarajuću zadanu vrijednost.
pageToken
string
Oznaka koja identificira stranicu rezultata koju poslužitelj treba vratiti. Obično je to vrijednost nextPageToken vraćena iz prethodnog poziva metode list .
Tijelo zahtjeva
Tijelo zahtjeva mora biti prazno.
Autorizacija
Zahtijeva najmanje jedan od sljedećih opsega 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
Odgovor
Ako je uspješno, tijelo odgovora sadrži podatke sa sljedećom strukturom: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Popis polica.
nextPageToken
string
Token za dohvaćanje sljedeće stranice rezultata. Proslijedite ovu vrijednost u polje pageToken u sljedećem pozivu metode list za dohvaćanje sljedeće stranice rezultata.

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>
Forsiranje u sadržaj
Stavljanje <h2> ili <h3> unutar zaglavlja tablice ( <th> ) prisilit će zaglavlje u sadržaj, kao kod ove tablice. Unutar zaglavlja tablice, <h2> i <h3> stilizirani su kao uobičajeni tekst, tako da čitatelji neće moći znati.

Stolovi fiksnog izgleda

Ako imate tablice sa sadržajem koji je širi od ćelije tablice (kao što su blokovi koda), možete prisiliti ćelije tablice s tim sadržajem da primijene prekoračenje pomicanja na ćelije tablice umjesto da se cijela tablica pomiče dodavanjem fiksne klase u element <table> :

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

Sljedeća tablica uključuje fixed klasu i ima preljev primijenjen na ćelije:

Renderirano

Ime Tip Opis
value String

Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac 

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

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>

Usporedite ovo s donjom tablicom koja prikazuje zadano ponašanje izgleda gdje se preljev primjenjuje na cijelu tablicu:

Renderirano

Ime Tip Opis
value String

Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac

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

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>

Kontrola širine stupaca

Prema zadanim postavkama, tablice s fiksnim rasporedom ravnomjerno raspoređuju ukupnu širinu tablice na svaki njezin stupac (tj. tablica s fiksnim rasporedom s tri stupca prikazuje svaki stupac na 33,33% ukupne širine tablice).

Renderirano

Ime Tip Opis
value String

Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac

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

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 kontrolu širine stupaca u tablici s fiksnim izgledom, ćelije u prvom retku tablice moraju sadržavati jedno od sljedećeg:

atribut(i) širine čije su vrijednosti ili postotak ( 20% ) ili u pikselima ( 240px ) element <colgroup> s podređenim elementima <col> koji imaju postavljen atribut(e) width Za najbolje rezultate, nemojte postavljati width na zadnjem <col> elementu ili zadnjoj ćeliji tablice budući da preglednik izračunava ovu vrijednost za vas.

Širine ćelija tablice

Renderirano

Ime Tip Opis
value String

Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac

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

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 uključene elementi

Renderirano

Ime Tip Opis
value String

Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac

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

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>

Responzivne tablice s fiksnim izgledom

Također možete kombinirati tablice fiksnog izgleda s responzivnim tablicama ako koristite opciju <colgroup> i <col> za postavljanje atributa širine: 

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

Renderirano

Parametri
value String
Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Vrsta navigacije po izboru

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>

Stolovi pune širine

DevSite podržava tablice koje se protežu cijelom širinom stranice korištenjem <table class="full-width">...</table> na tablicama najviše razine (tj. tablicama na istoj hijerarhijskoj razini kao i naslovi stranice):

Ime Tip Opis
vrijednost Niz Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac
navigationType PageNavigationType Vrsta navigacije po izboru

Stolovi s okomitim reglerima

Možete prikazati okomita pravila između svakog <th> i <td> u retku tablice pomoću <table class="vertical-rules">...</table> :

Ime Tip Opis
vrijednost Niz Vrijednost izbora koju ispitanici vide kao oznaku kada gledaju obrazac
navigationType PageNavigationType Izbor vrste navigacije

Tekst u stupcima

Možete rasporediti tekst u stupce i ukloniti sve stilove iz <table> pomoću <table class="columns">...</table> . To se obično koristi za sređivanje dugih uskih popisa.

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>

Stolne boje

Standardne tablice obojene su kao gore, a dostupno je nekoliko drugih boja koristeći klase blue , cyan , green , orange , pink i purple . 

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

Više boja unutar jedne tablice nije podržano, ali nazivi klasa boja tablice mogu se kombinirati s drugim gore navedenim opcijama naziva klasa tablice. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Plava
key type
Neke informacije o key .
cijan
key type
Neke informacije o key .
zelena
key type
Neke informacije o key .
Narančasto
key type
Neke informacije o key .
Ružičasta
key type
Neke informacije o key .
Ljubičasta
key type
Neke informacije o key .

Alternativne boje redaka

Za izmjenu boja pozadinskih redaka u vašoj tablici dodajte klasu alternating-odd-rows ili alternating-even-rows elementu <table> .

Izmjenični neparni redovi 

<table class="alternating-odd-rows">
Ime Opis
Jedna riba Ovo je opis One Fish
Dvije ribe Ovo je opis Dvije ribe
Crvena riba Ovo je opis crvene ribe
Plava riba Ovo je opis Plave ribe
Druge ribe Ovo je opis Druge ribe

Izmjenični parni redovi

U ovom primjeru, boja iz boja tablice također se primjenjuje na tablicu putem green klase. 

<table class="alternating-even-rows green">
Ime Opis
Jedna riba Ovo je opis One Fish
Dvije ribe Ovo je opis Dvije ribe
Crvena riba Ovo je opis crvene ribe
Plava riba Ovo je opis Plave ribe
Druge ribe Ovo je opis Druge ribe