Tabelat

Tabelat mbështeten me shënjimin standard. Këtu është një tabelë tipike me një rresht titulli, disa rreshta të rregullt dhe një rresht të shënuar si <tr class="alt"> , i cili prodhon një sfond më të errët që mund të përdoret si një titull alternativ.

E dhënë

Një Dy Tre
1.0 2.0 3.0
1.1 2.1 3.1
Këtu vijnë disa numra që përfundojnë me .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>```

Tabelat e përgjegjshme

DevSite mbështet tabela të përgjegjshme që shtrihen të ndryshme në ekrane më të vogla. Këtu është një tabelë normale referimi:

E dhënë

Emri Lloji Përshkrimi
value String Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin
navigationType PageNavigationType Lloji i lundrimit të zgjedhjes

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>

Dhe këtu është e njëjta tabelë, e përshtatur për të përdorur class="responsive" . Nëse e ngushtoni dritaren e shfletuesit, ajo do të shtrihet vertikalisht dhe jo horizontalisht:

E dhënë

Parametrat
value String
Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin
navigationType PageNavigationType
Lloji i lundrimit të zgjedhjes

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>

Për të përdorur class="responsive" , tabelat duhet të strukturohen në një mënyrë të veçantë:

  • Duhet të ketë vetëm dy kolona në tabelë: kolona e parë për gjërat që përcaktohen (çelësi) dhe kolona e dytë për të gjitha informacionet rreth atij çelësi, në disa rreshta nëse është e nevojshme. Ky kufizim me dy kolona do të thotë që tabelat e përgjegjshme nuk mund të përdoren për të dhëna tabelare vërtet dy-dimensionale, krahasimin e veçorive të bazuara në shenja, por ato janë të përshtatshme për informacion referencë (ose çdo të dhënë tjetër që mund të shprehet në mënyrë të arsyeshme nga një listë përkufizimesh në vend të një tavolinë).
  • Nëse ka shumë rreshta informacioni rreth çelësit - të themi, një lloj dhe një përshkrim - mbështilleni çdo rresht në <p> për të detyruar ndërprerjet e linjës (në vend të <br> ).
  • Duhet të ketë vetëm një qelizë në rreshtin e kokës. Përdorni <th colspan="2"> për ta detyruar atë të shtrijë të dy kolonat. Për t'ju kujtuar këtë sjellje, DevSite fsheh automatikisht çdo <th> pas të parës (që qëllimisht duket shumë e prishur).

Kjo teknikë funksionon edhe për tabela shumë komplekse, madje edhe ato që përmbajnë tabela të mbivendosura:

E dhënë

Detajet
Parametrat e pyetjes
pageSize
int32
Madhësia e kërkuar e faqes. Serveri mund të kthejë më pak rafte sesa kërkohet. Nëse nuk specifikohet, serveri do të zgjedhë një parazgjedhje të përshtatshme.
pageToken
string
Një shenjë që identifikon një faqe të rezultateve që serveri duhet të kthejë. Në mënyrë tipike, kjo është vlera e nextPageToken e kthyer nga metoda e mëparshme e thirrjes në list .
Trupi i kërkesës
Trupi i kërkesës duhet të jetë bosh.
Autorizimi
Kërkon të paktën një nga fushat e mëposhtme të 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
Përgjigje
Nëse është i suksesshëm, trupi i përgjigjes përmban të dhëna me strukturën e mëposhtme: 
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Lista e rafteve.
nextPageToken
string
Një shenjë për të tërhequr faqen tjetër të rezultateve. Kaloni këtë vlerë në fushën pageToken në thirrjen pasuese në metodën list për të tërhequr faqen tjetër të rezultateve.

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>
Forcimi në tabelën e përmbajtjes
Vendosja e një <h2> ose <h3> brenda një titulli tabele ( <th> ) do ta detyrojë titullin në tabelën e përmbajtjes, si me këtë tabelë. Brenda kokës së tabelës, <h2> dhe <h3> janë stilizuar si tekst i zakonshëm, kështu që lexuesit nuk do të jenë në gjendje ta dallojnë.

Tabelat me paraqitje fikse

Nëse keni tabela me përmbajtje që është më e gjerë se një qelizë tabele (të tilla si blloqet e kodit), mund t'i detyroni qelizat e tabelës me atë përmbajtje të aplikojnë lëvizjen e tejmbushjes në qelizat e tabelës në vend që të kenë të gjithë lëvizjen e tabelës duke shtuar një klasë fikse në elementi <table> :

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

Tabela e mëposhtme përfshin klasën fixed dhe ka tejmbushje të aplikuar në qelizat e saj:

E dhënë

Emri Lloji Përshkrimi
value String

Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin 

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Lloji i lundrimit të zgjedhjes

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>

Krahasoni këtë me tabelën më poshtë e cila tregon sjelljen e paracaktuar të paraqitjes ku tejmbushja aplikohet në të gjithë tabelën:

E dhënë

Emri Lloji Përshkrimi
value String

Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin

This code block exceeds the width of its table cell, which causes the entire table to have overflow scrolling.
navigationType PageNavigationType Lloji i lundrimit të zgjedhjes

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>

Kontrollimi i gjerësisë së kolonave

Si parazgjedhje, tabelat me paraqitje fikse shpërndajnë në mënyrë të barabartë gjerësinë e përgjithshme të tabelës në secilën prej kolonave të saj (dmth., një tabelë me paraqitje fikse me tre kolona shfaq secilën kolonë në 33,33% të gjerësisë së përgjithshme të tabelës).

E dhënë

Emri Lloji Përshkrimi
value String

Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Lloji i lundrimit të zgjedhjes

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>

Për të kontrolluar gjerësinë e kolonave në një tabelë me paraqitje fikse, qelizat në rreshtin e parë të tabelës duhet të përfshijnë një nga sa vijon:

atributet width (atributet) vlerat e të cilëve janë ose një përqindje ( 20% ) ose në piksel ( 240px ) një element <colgroup> me elemente <col> fëmijë që kanë atribut(a) width të vendosur mbi to Për rezultate më të mira, mos vendosni një width në elementin e fundit <col> ose qelizën e fundit të tabelës meqenëse shfletuesi llogarit këtë vlerë për ju.

Gjerësia në qelizat e tabelës

E dhënë

Emri Lloji Përshkrimi
value String

Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Lloji i lundrimit të zgjedhjes

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>

Gjerësia në elementet

E dhënë

Emri Lloji Përshkrimi
value String

Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin

Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType Lloji i lundrimit të zgjedhjes

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>

Tabelat e përgjegjshme me paraqitje fikse

Ju gjithashtu mund të kombinoni tabela me paraqitje fikse me tabela të përgjegjshme nëse përdorni opsionin <colgroup> dhe <col> për vendosjen e atributeve të gjerësisë: 

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

E dhënë

Parametrat
value String
Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Lloji i lundrimit të zgjedhjes

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>

Tabelat me gjerësi të plotë

DevSite mbështet tabelat që shtrihen në të gjithë gjerësinë e faqes duke përdorur <table class="full-width">...</table> në tabelat e nivelit të lartë (d.m.th., tabelat në të njëjtin nivel hierarkik si titujt e faqeve):

Emri Lloji Përshkrimi
vlerë Vargu Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin
Lloji i navigimit PageNavigationType Lloji i lundrimit të zgjedhjes

Tabelat me rregulla vertikale

Ju mund të shfaqni rregulla vertikale midis çdo <th> dhe <td> në një rresht tabele duke përdorur <table class="vertical-rules">...</table> :

Emri Lloji Përshkrimi
vlerë Varg Vlera e zgjedhjes, të cilën të anketuarit e shohin si etiketë kur shikojnë formularin
Lloji i navigimit PageNavigationType Lloji i lundrimit të zgjedhjes

Teksti në kolona

Mund ta rregulloni tekstin në kolona dhe të hiqni të gjitha stilimet nga një <table> duke përdorur <table class="columns">...</table> . Kjo zakonisht përdoret për rregullimin e listave të gjata të ngushta.

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>

Ngjyrat e tavolinës

Tabelat standarde janë me ngjyra si më sipër, dhe disa ngjyra të tjera janë të disponueshme duke përdorur klasat blue , cyan , green , orange , pink dhe purple . 

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

Shumë ngjyra brenda një tabele të vetme nuk mbështeten, por emrat e klasave të ngjyrave të tabelës mund të kombinohen me opsionet e tjera të emrave të klasave të tabelës të përmendura më sipër. 

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Blu
key type
Disa informacione rreth key .
Cyan
key type
Disa informacione rreth key .
E gjelbër
key type
Disa informacione rreth key .
portokalli
key type
Disa informacione rreth key .
Rozë
key type
Disa informacione rreth key .
Vjollcë
key type
Disa informacione rreth key .

Ngjyra alternative të rreshtave

Për të alternuar ngjyrat e rreshtave të sfondit në tabelën tuaj, shtoni një klasë të alternating-odd-rows tek ose alternating-even-rows në elementin <table> .

Alternimi i rreshtave tek 

<table class="alternating-odd-rows">
Emri Përshkrimi
Një Peshk Ky është një përshkrim i One Fish
Dy peshq Ky është një përshkrim i Dy Peshqve
Peshku i kuq Ky është një përshkrim i Peshkut të Kuq
Peshku blu Ky është një përshkrim i Peshkut Blu
Peshq të tjerë Ky është një përshkrim i Peshqve të tjerë

Alternimi i rreshtave madje

Në këtë shembull, një ngjyrë nga ngjyrat e tabelës aplikohet gjithashtu në tabelë përmes klasës green . 

<table class="alternating-even-rows green">
Emri Përshkrimi
Një Peshk Ky është një përshkrim i One Fish
Dy peshq Ky është një përshkrim i Dy Peshqve
Peshku i kuq Ky është një përshkrim i Peshkut të Kuq
Peshku blu Ky është një përshkrim i Peshkut Blu
Peshq të tjerë Ky është një përshkrim i Peshqve të tjerë