Tabeller

Tabeller stöds med standarduppmärkning. Här är en typisk tabell med en rubrikrad, flera vanliga rader och en rad markerad som <tr class="alt"> , som ger en mörkare bakgrund som kan användas som en alternativ rubrik.

Rensat

En Två Tre
1.0 2.0 3.0
1.1 2.1 3.1
Här kommer några siffror som slutar 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>```

Responsiva tabeller

DevSite stöder responsiva tabeller som har olika upplägg på mindre skärmar. Här är en normal referenstabell:

Rensat

Namn Typ Beskrivning
value String Valets värde, vilket respondenterna ser som en etikett när de visar formuläret
navigationType PageNavigationType Valets navigeringstyp

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>

Och här är samma tabell, anpassad för att använda class="responsive" . Om du begränsar webbläsarfönstret kommer det att läggas ut vertikalt istället för horisontellt:

Rensat

Parametrar
value String
Valets värde, vilket respondenterna ser som en etikett när de visar formuläret
navigationType PageNavigationType
Valets navigeringstyp

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>

För att använda class="responsive" måste tabeller vara strukturerade på ett speciellt sätt:

  • Det får bara finnas två kolumner i tabellen: den första kolumnen för de saker som definieras (nyckeln), och den andra kolumnen för all information om den nyckeln, i flera rader om det behövs. Denna begränsning med två kolumner innebär att responsiva tabeller inte kan användas för verkligt tvådimensionell tabelldata, bockmärksbaserad jämförelse av funktioner, men de är väl lämpade för referensinformation (eller annan data som rimligen skulle kunna uttryckas av en definitionslista istället för ett bord).
  • Om det finns flera rader med information om nyckeln – säg en typ och en beskrivning – linda varje rad i <p> ​​för att tvinga fram radbrytningar (istället för <br> ).
  • Det får bara finnas en cell i rubrikraden. Använd <th colspan="2"> för att tvinga den att sträcka sig över båda kolumnerna. För att påminna dig om detta beteende döljer DevSite automatiskt alla <th> efter den första (som avsiktligt ser väldigt trasig ut).

Den här tekniken fungerar också för mycket komplexa tabeller, även de som innehåller kapslade tabeller:

Rensat

Detaljer
Fråga parametrar
pageSize
int32
Begärd sidstorlek. Servern kan returnera färre hyllor än begärt. Om ospecificerat, kommer servern att välja en lämplig standard.
pageToken
string
En token som identifierar en sida med resultat som servern ska returnera. Vanligtvis är detta värdet på nextPageToken som returneras från den föregående anrop till list .
Begäran kropp
Begäran måste vara tom.
Tillstånd
Kräver minst ett av följande OAuth 2.0-omfång: 
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
Om det lyckas innehåller svarstexten data med följande struktur: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Listan över hyllor.
nextPageToken
string
En token för att hämta nästa sida med resultat. Skicka detta värde i fältet pageToken i det efterföljande anropet till list för att hämta nästa sida med resultat.

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>
Tvinga in i innehållsförteckningen
Att placera en <h2> eller <h3> i en tabellrubrik ( <th> ) kommer att tvinga in rubriken i innehållsförteckningen, som med den här tabellen. Inuti en tabellrubrik är <h2> och <h3> stilade som vanlig text, så att läsarna inte kan se.

Tabeller med fast layout

Om du har tabeller med innehåll som är bredare än en tabellcell (t.ex. kodblock), kan du tvinga tabellcellerna med det innehållet att tillämpa överflödesrullning på tabellcellerna istället för att låta hela tabellen rulla genom att lägga till en fast klass till elementet <table> :

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

Följande tabell inkluderar den fixed klassen och har överflöde tillämpat på dess celler:

Rensat

Namn Typ Beskrivning
value String

Valets värde, vilket respondenterna ser som en etikett när de visar formuläret 

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

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>

Jämför detta med tabellen nedan som visar standardlayoutbeteendet där överflöde tillämpas på hela tabellen:

Rensat

Namn Typ Beskrivning
value String

Valets värde, vilket respondenterna ser som en etikett när de visar formuläret

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

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>

Styr kolumnbredder

Som standard fördelar tabeller med fast layout tabellens totala bredd jämnt till var och en av dess kolumner (dvs. en tabell med fast layout med tre kolumner visar varje kolumn med 33,33 % av tabellens totala bredd).

Rensat

Namn Typ Beskrivning
value String

Valets värde, vilket respondenterna ser som en etikett när de visar formuläret

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

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>

För att styra bredden på kolumnerna i en tabell med fast layout måste cellerna i den första raden i tabellen innehålla något av följande:

width-attribut(er) vars värden är antingen en procentandel ( 20% ) eller i pixlar ( 240px ) ett <colgroup> -element med <col> underordnade element som har width attribut(er) inställda på dem. För bästa resultat, ställ inte in en width på det sista <col> -elementet eller sista tabellcellen sedan webbläsaren beräknar detta värde åt dig.

Bredd på tabellceller

Rensat

Namn Typ Beskrivning
value String

Valets värde, vilket respondenterna ser som en etikett när de visar formuläret

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

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>

Bredd på element

Rensat

Namn Typ Beskrivning
value String

Valets värde, som respondenterna ser som en etikett när de visar formuläret

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

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>

Responsiva tabeller med fast layout

Du kan också kombinera tabeller med fast layout med responsiva tabeller om du använder alternativen <colgroup> och <col> för att ställa in breddattribut: 

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

Rensat

Parametrar
value String
Valets värde, som respondenterna ser som en etikett när de visar formuläret 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Valets navigeringstyp

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>

Fullbreddsbord

DevSite stöder tabeller som spänner över hela sidans bredd genom att använda <table class="full-width">...</table> på toppnivåtabeller (dvs tabeller på samma hierarkiska nivå som sidrubriker):

Namn Typ Beskrivning
värde Sträng Valets värde, vilket respondenterna ser som en etikett när de visar formuläret
navigationType PageNavigationType Valets navigeringstyp

Tabeller med vertikala regler

Du kan visa vertikala regler mellan varje <th> och <td> i en tabellrad genom att använda <table class="vertical-rules">...</table> :

Namn Typ Beskrivning
värde Sträng Valets värde, vilket respondenterna ser som en etikett när de visar formuläret
navigationType PageNavigationType Valets navigeringstyp

Text i kolumner

Du kan ordna text i kolumner och ta bort all stil från en <table> genom att använda <table class="columns">...</table> . Detta används vanligtvis för att ordna långa smala listor.

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>

Bordsfärger

Standardbord är färgade enligt ovan, och flera andra färger är tillgängliga med klasserna blue , cyan , green , orange , pink och purple . 

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

Flera färger inom en enda tabell stöds inte, men tabellfärgsklassnamn kan kombineras med de andra tabellklassnamnsalternativen som nämns ovan. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Blå
key type
Lite information om key .
Cyan
key type
Lite information om key .
Grön
key type
Lite information om key .
Orange
key type
Lite information om key .
Rosa
key type
Lite information om key .
Purpur
key type
Lite information om key .

Alternativa radfärger

För att alternera bakgrundsradsfärger i din tabell, lägg till en alternating-odd-rows eller alternating-even-rows klass till <table> -elementet.

Omväxlande udda rader 

<table class="alternating-odd-rows">
Namn Beskrivning
En fisk Detta är en beskrivning av One Fish
Två fiskar Detta är en beskrivning av Two Fish
Röd fisk Detta är en beskrivning av Red Fish
Blå fisk Detta är en beskrivning av Blue Fish
Annan fisk Detta är en beskrivning av Andra fiskar

Omväxlande jämna rader

I det här exemplet appliceras även en färg från tabellfärger på tabellen via den green klassen. 

<table class="alternating-even-rows green">
Namn Beskrivning
En fisk Detta är en beskrivning av One Fish
Två fiskar Detta är en beskrivning av Two Fish
Röd fisk Detta är en beskrivning av Red Fish
Blå fisk Detta är en beskrivning av Blue Fish
Annan fisk Detta är en beskrivning av Andra fiskar