Tablolar

Tablolar, standart işaretlemeyle desteklenir. Aşağıda, başlık satırı, birkaç normal satır ve <tr class="alt"> olarak işaretlenmiş bir satır içeren, alternatif başlık olarak kullanılabilecek daha koyu bir arka plan oluşturan tipik bir tablo verilmiştir.

Oluşturuldu

Bir İki Üç
1,0 2,0 3,0
1.1 2.1 3.1
.2 ile biten bazı sayılar aşağıda verilmiştir.
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>```

Duyarlı tablolar

DevSite, küçük ekranlarda farklı şekilde düzenlenen duyarlı tabloları destekler. Normal bir referans tablosu aşağıda verilmiştir:

Oluşturuldu

Ad Tür Açıklama
value String Katılımcıların formu görüntülerken etiket olarak gördüğü, seçimin değeri
navigationType PageNavigationType Seçimin gezinme türü

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>

Aşağıda, class="responsive" kullanacak şekilde uyarlanmış aynı tablo verilmiştir. Tarayıcı penceresini daralttığınızda yatay yerine dikey olarak düzenlenir:

Oluşturuldu

Parametreler
valueString
Katılımcıların formu görüntülerken etiket olarak gördüğü, seçimin değeri
navigationTypePageNavigationType
Seçimle ilişkili gezinme türü

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>

class="responsive"'ü kullanmak için tabloların belirli bir şekilde yapılandırılması gerekir:

  • Tabloda yalnızca iki sütun olmalıdır: tanımlanan öğeler (anahtar) için ilk sütun ve bu anahtarla ilgili tüm bilgiler için ikinci sütun (gerekirse birden çok satırda). Bu iki sütunlu kısıtlama, duyarlı tabloların gerçek anlamda iki boyutlu tablo verileri ve onay kutusu tabanlı özellik karşılaştırması için kullanılamayacağı ancak referans bilgileri (veya tablo yerine makul bir şekilde bir tanım listesi ile ifade edilebilecek diğer tüm veriler) için çok uygun olduğu anlamına gelir.
  • Anahtarla ilgili birden fazla bilgi satırı varsa (ör. bir tür ve açıklama) satır aralarını zorlamak için her satırı <p> içine alın (<br> yerine).
  • Başlık satırında yalnızca bir hücre olmalıdır. <th colspan="2"> simgesini kullanarak her iki sütunu da kaplamasını sağlayın. DevSite, bu davranışı hatırlatmak için ilk <th>'ten sonraki tüm <th>'leri otomatik olarak gizler (bu <th>'ler kasıtlı olarak çok bozuk görünür).

Bu teknik, iç içe tablolar içerenler de dahil olmak üzere çok karmaşık tablolar için de kullanılabilir:

Oluşturuldu

Ayrıntılar
Sorgu parametreleri
pageSize
int32
İstenen sayfa boyutu. Sunucu, istenenden daha az raf döndürebilir. Belirtilmemişse sunucu uygun bir varsayılan değer seçer.
pageToken
string
Sunucunun döndürmesi gereken bir sonuç sayfasını tanımlayan jeton. Genellikle bu, list yöntemine yapılan önceki çağrıdan döndürülen nextPageToken değerini ifade eder.
İstek içeriği
İstek metni boş olmalıdır.
Yetkilendirme
Aşağıdaki OAuth 2.0 kapsamlarından en az biri gereklidir:
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
Yanıt
Başarılı olursa yanıt metni aşağıdaki yapıyla birlikte verileri içerir:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Rafların listesi.
nextPageToken
string
Sonuçların sonraki sayfasını almak için jeton. Sonuçların bir sonraki sayfasını almak için list yönteminin sonraki çağrısında bu değeri pageToken alanına iletin.

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>
İçindekiler tablosuna zorlama
Tablo başlığının (<th>) içine <h2> veya <h3> eklemek, başlığı bu tabloda olduğu gibi içindekiler tablosuna zorlar. Tablo başlığında <h2> ve <h3>, normal metin gibi biçimlendirilir. Bu nedenle okuyucular farkı anlayamaz.

Sabit düzenli tablolar

Tablo hücresinden daha geniş içeriklere sahip tablolarınız varsa (kod blokları gibi) <table> öğesine sabit bir sınıf ekleyerek tablonun tamamının kaydırılmasını sağlamak yerine, bu içeriğe sahip tablo hücrelerinin tablo hücrelerine taşma kaydırma uygulamasını zorlayabilirsiniz:

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

Aşağıdaki tabloda fixed sınıfı yer alır ve hücrelerine taşma uygulanmıştır:

Oluşturuldu

Ad Tür Açıklama
value String

Katılımcıların formu görüntülerken etiket olarak gördüğü, seçimin değeri

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

navigationType PageNavigationType Seçimin gezinme türü

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>

Bunu, aşağıdaki tabloyla karşılaştırın. Bu tabloda, tablonun tamamına taşmanın uygulandığı varsayılan düzen davranışı gösterilmektedir:

Oluşturuldu

Ad Tür Açıklama
value String

Katılımcıların formu görüntülerken etiket olarak gördüğü, seçimin değeri

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

navigationType PageNavigationType Seçimin gezinme türü

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>

Sütun genişliklerini kontrol etme

Sabit düzenli tablolar varsayılan olarak tablonun toplam genişliğini sütunlarının her birine eşit olarak dağıtır (ör. üç sütunlu sabit düzenli bir tabloda her sütun, tablonun toplam genişliğinin% 33,33'ünde gösterilir).

Oluşturuldu

Ad Tür Açıklama
value String

Katılımcıların formu görüntülerken etiket olarak gördüğü, seçimin değeri

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

navigationType PageNavigationType Seçimin gezinme türü

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>

Sabit düzenli bir tablodaki sütunların genişliğini kontrol etmek için tablonun ilk satırındaki hücreler aşağıdakilerden birini içermelidir:

Değerleri yüzde (20%) veya piksel (240px) olan genişlik özellikleri width özelliklerinin ayarlandığı <col> alt öğesine sahip bir <colgroup> öğesi En iyi sonuçlar için tarayıcı bu değeri sizin için hesapladığından son <col> öğesinde veya son tablo hücresinde width ayarlama yapmayın.

Tablo hücrelerindeki genişlikler

Oluşturuldu

Ad Tür Açıklama
value String

Katılımcıların formu görüntülerken etiket olarak gördüğü, seçimin değeri

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

navigationType PageNavigationType Seçimin gezinme türü

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>

Öğelerdeki genişlikler

Oluşturuldu

Ad Tür Açıklama
value String

Katılımcıların formu görüntülerken etiket olarak gördüğü, seçimin değeri

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

navigationType PageNavigationType Seçimin gezinme türü

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>

Sabit düzene sahip duyarlı tablolar

Genişlik özelliklerini ayarlamak için <colgroup> ve <col> seçeneğini kullanırsanız sabit düzenli tabloları uyumlu tablolarla da birleştirebilirsiniz:

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

Oluşturuldu

Parametreler
valueString
Seçeneğin değeri. Katılımcılar formu görüntülerken bu değeri etiket olarak görür. 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Seçmenin gezinme türü

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>

Tam genişlikte tablolar

DevSite, üst düzey tablolarda (yani sayfa başlıklarıyla aynı hiyerarşik düzeydeki tablolarda) <table class="full-width">...</table> kullanarak sayfanın tüm genişliğini kaplayan tabloları destekler:

Ad Tür Açıklama
value Dize Katılımcıların formu görüntülerken etiket olarak gördüğü, seçimin değeri
navigationType PageNavigationType Seçimin gezinme türü

Dikey kurallar içeren tablolar

<table class="vertical-rules">...</table> kullanarak bir tablo satırındaki her <th> ve <td> arasında dikey cetveller gösterebilirsiniz:

Ad Tür Açıklama
value Dize Katılımcıların formu görüntülerken etiket olarak gördüğü, seçimin değeri
navigationType PageNavigationType Seçimin gezinme türü

Sütunlardaki metinler

<table class="columns">...</table> kullanarak metni sütunlar halinde düzenleyebilir ve <table> öğesindeki tüm stili kaldırabilirsiniz. Bu, genellikle uzun ve dar listeleri düzenlemek için kullanılır.

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>

Tablo renkleri

Standart tablolar yukarıda gösterildiği gibi renklendirilir. blue, cyan, green, orange, pink ve purple sınıfları kullanılarak başka renkler de kullanılabilir.

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

Tek bir tabloda birden fazla renk desteklenmez ancak tablo rengi sınıf adları, yukarıda belirtilen diğer tablo sınıf adı seçenekleriyle birleştirilebilir.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Mavi
key type
key hakkında bazı bilgiler.
Camgöbeği
key type
key hakkında bazı bilgiler.
Yeşil
key type
key hakkında bazı bilgiler.
Orange
key type
key hakkında bazı bilgiler.
Pembe
key type
key hakkında bazı bilgiler.
Mor
key type
key hakkında bazı bilgiler.

Alternatif satır renkleri

Tablonuzdaki arka plan satır renklerini değiştirmek için <table> öğesine bir alternating-odd-rows veya alternating-even-rows sınıfı ekleyin.

Tek sayılı satırların dönüşümü

<table class="alternating-odd-rows">
Ad Açıklama
One Fish Bu, One Fish ile ilgili bir açıklama
İki Balık Bu, Two Fish ile ilgili bir açıklama
Kırmızı Balık Bu, Kırmızı Balık ile ilgili bir açıklama
Blue Fish Bu, Mavi Balık ile ilgili bir açıklama
Diğer Balıklar Bu, diğer balıklar için bir açıklama

Çift satırları dönüşümlü olarak gösterme

Bu örnekte, green sınıfı aracılığıyla tabloya tablo renkleri arasından bir renk de uygulanmaktadır.

<table class="alternating-even-rows green">
Ad Açıklama
One Fish Bu, One Fish ile ilgili bir açıklama
İki Balık Bu, Two Fish ile ilgili bir açıklama
Kırmızı Balık Bu, Kırmızı Balık ile ilgili bir açıklama
Blue Fish Bu, Mavi Balık ile ilgili bir açıklama
Diğer Balıklar Bu, diğer balıklar için bir açıklama