Tabeller

Tabeller støttes med standard markup. Her er en typisk tabell med en overskriftsrad, flere vanlige rader og en rad merket som <tr class="alt"> , som gir en mørkere bakgrunn som kan brukes som en alternativ overskrift.

Gjengitt

En To Tre
1.0 2.0 3.0
1.1 2.1 3.1
Her kommer noen tall som ender på .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>```

Responsive tabeller

DevSite støtter responsive tabeller som er forskjellige på mindre skjermer. Her er en vanlig referansetabell:

Gjengitt

Navn Type Beskrivelse
value String Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet
navigationType PageNavigationType Valgets navigasjonstype

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>

Og her er den samme tabellen, tilpasset for bruk av class="responsive" . Hvis du begrenser nettleservinduet, vil det legges ut vertikalt i stedet for horisontalt:

Gjengitt

Parametere
value String
Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet
navigationType PageNavigationType
Valgets navigasjonstype

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>

For å bruke class="responsive" , må tabeller være strukturert på en bestemt måte:

  • Det må bare være to kolonner i tabellen: den første kolonnen for tingene som defineres (nøkkelen), og den andre kolonnen for all informasjon om den nøkkelen, i flere linjer om nødvendig. Denne begrensningen med to kolonner betyr at responsive tabeller ikke kan brukes for virkelig todimensjonale tabelldata, avkrysningsbasert funksjonssammenligning, men de er godt egnet for referanseinformasjon (eller andre data som med rimelighet kan uttrykkes av en definisjonsliste i stedet for et bord).
  • Hvis det er flere linjer med informasjon om nøkkelen – for eksempel en type og en beskrivelse – pakk hver linje inn i <p> ​​for å tvinge frem linjeskift (i stedet for <br> ).
  • Det må bare være én celle i overskriftsraden. Bruk <th colspan="2"> for å tvinge den til å spenne over begge kolonnene. For å minne deg på denne oppførselen, skjuler DevSite automatisk alle <th> etter den første (som med vilje ser veldig ødelagt ut).

Denne teknikken fungerer også for svært komplekse tabeller, selv de som inneholder nestede tabeller:

Gjengitt

Detaljer
Søkeparametere
pageSize
int32
Forespurt sidestørrelse. Server kan returnere færre hyller enn forespurt. Hvis det ikke er spesifisert, vil serveren velge en passende standard.
pageToken
string
Et token som identifiserer en side med resultater serveren skal returnere. Vanligvis er dette verdien av nextPageToken returnert fra forrige kall til list -metoden.
Forespørselsinstans
Forespørselsteksten må være tom.
Autorisasjon
Krever minst ett av følgende OAuth 2.0-omfang: 
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
Svar
Hvis det lykkes, inneholder svarteksten data med følgende struktur: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Listen over hyller.
nextPageToken
string
Et symbol for å hente neste side med resultater. Send denne verdien i pageToken feltet i det påfølgende kallet til list for å hente neste side med resultater.

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>
Tvinge inn i innholdsfortegnelsen
Å sette en <h2> eller <h3> i en tabelloverskrift ( <th> ) vil tvinge overskriften inn i innholdsfortegnelsen, som med denne tabellen. Inne i en tabelloverskrift er <h2> og <h3> stilt som vanlig tekst, slik at leserne ikke kan se.

Tabeller med fast oppsett

Hvis du har tabeller med innhold som er bredere enn en tabellcelle (som kodeblokker), kan du tvinge tabellcellene med det innholdet til å bruke overløpsrulling på tabellcellene i stedet for å la hele tabellen rulle ved å legge til en fast klasse til <table> -elementet:

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

Følgende tabell inkluderer den fixed klassen og har overløp brukt på cellene:

Gjengitt

Navn Type Beskrivelse
value String

Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet 

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

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>

Sammenlign dette med tabellen nedenfor som viser standard layoutoppførsel der overflyt brukes på hele tabellen:

Gjengitt

Navn Type Beskrivelse
value String

Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet

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

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>

Kontrollere kolonnebredder

Som standard fordeler tabeller med fast oppsett tabellens totale bredde jevnt til hver av kolonnene (dvs. en fast oppsetttabell med tre kolonner viser hver kolonne med 33,33 % av tabellens totale bredde).

Gjengitt

Navn Type Beskrivelse
value String

Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet

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

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>

For å kontrollere bredden på kolonnene i en tabell med fast oppsett, må cellene i den første raden i tabellen inneholde ett av følgende:

breddeattributt(er) hvis verdier er enten en prosent ( 20% ) eller i piksler ( 240px ) et <colgroup> -element med <col> underordnede elementer som har width (er) angitt for å oppnå best resultat, ikke angi en width på det siste <col> -elementet eller siste tabellcellen siden nettleseren beregner denne verdien for deg.

Bredder på tabellceller

Gjengitt

Navn Type Beskrivelse
value String

Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet

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

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>

Bredder på elementer

Gjengitt

Navn Type Beskrivelse
value String

Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet

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

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>

Responsive tabeller med fast oppsett

Du kan også kombinere tabeller med fast oppsett med responsive tabeller hvis du bruker alternativet <colgroup> og <col> for å angi breddeattributter: 

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

Gjengitt

Parametere
value String
Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Valgets navigasjonstype

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>

Bord i full bredde

DevSite støtter tabeller som spenner over hele bredden av siden ved å bruke <table class="full-width">...</table> på toppnivåtabeller (dvs. tabeller på samme hierarkiske nivå som sideoverskrifter):

Navn Type Beskrivelse
verdi String Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet
navigasjonsType PageNavigationType Valgets navigasjonstype

Tabeller med vertikale regler

Du kan vise vertikale regler mellom hver <th> og <td> i en tabellrad ved å bruke <table class="vertical-rules">...</table> :

Navn Type Beskrivelse
verdi String Valgets verdi, som respondentene ser som en etikett når de ser på skjemaet
navigasjonsType PageNavigationType Valgets navigasjonstype

Tekst i kolonner

Du kan ordne tekst i kolonner og fjerne all stil fra en <table> ved å bruke <table class="columns">...</table> . Dette brukes vanligvis for å arrangere lange smale lister.

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>

Bordfarger

Standardbord er farget som ovenfor, og flere andre farger er tilgjengelige med klassene blue , cyan , green , orange , pink og purple . 

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

Flere farger i en enkelt tabell støttes ikke, men tabellfargeklassenavn kan kombineres med de andre tabellklassenavnalternativene nevnt ovenfor. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Blå
key type
Litt informasjon om key .
Cyan
key type
Litt informasjon om key .
Grønn
key type
Litt informasjon om key .
Oransje
key type
Litt informasjon om key .
Rosa
key type
Litt informasjon om key .
Lilla
key type
Litt informasjon om key .

Alternative radfarger

For å veksle bakgrunnsradfarger i tabellen, legg til en alternating-odd-rows eller alternating-even-rows klasse til <table> -elementet.

Vekslende odde rader 

<table class="alternating-odd-rows">
Navn Beskrivelse
En fisk Dette er en beskrivelse av One Fish
To fisker Dette er en beskrivelse av Two Fish
Rød fisk Dette er en beskrivelse av Red Fish
Blå fisk Dette er en beskrivelse av Blue Fish
Annen fisk Dette er en beskrivelse av annen fisk

Vekslende jevne rader

I dette eksemplet blir også en farge fra tabellfarger påført tabellen via den green klassen. 

<table class="alternating-even-rows green">
Navn Beskrivelse
En fisk Dette er en beskrivelse av One Fish
To fisker Dette er en beskrivelse av Two Fish
Rød fisk Dette er en beskrivelse av Red Fish
Blå fisk Dette er en beskrivelse av Blue Fish
Annen fisk Dette er en beskrivelse av annen fisk