Tabel

Tabel didukung dengan markup standar. Berikut adalah tabel standar dengan baris judul, beberapa baris reguler, dan baris yang ditandai sebagai <tr class="alt">, yang menghasilkan latar belakang yang lebih gelap yang dapat digunakan sebagai header alternatif.

Hasil render

Satu Dua Tiga
1.0 2.0 3.0
1.1 2.1 3.1
Berikut beberapa angka yang diakhiri dengan .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>```

Tabel responsif

DevSite mendukung tabel responsif yang memiliki tata letak yang berbeda di layar yang lebih kecil. Berikut adalah tabel referensi normal:

Hasil render

Nama Jenis Deskripsi
value String Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir
navigationType PageNavigationType Jenis navigasi pilihan

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>

Berikut adalah tabel yang sama, yang diadaptasi untuk menggunakan class="responsive". Jika Anda mempersempit jendela browser, jendela akan ditata secara vertikal, bukan horizontal:

Hasil render

Parameter
valueString
Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir
navigationTypePageNavigationType
Jenis navigasi pilihan

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>

Untuk menggunakan class="responsive", tabel harus disusun dengan cara tertentu:

  • Hanya boleh ada dua kolom dalam tabel: kolom pertama untuk hal-hal yang ditentukan (kunci), dan kolom kedua untuk semua informasi tentang kunci tersebut, dalam beberapa baris jika perlu. Pembatasan dua kolom ini berarti bahwa tabel responsif tidak dapat digunakan untuk data tabel dua dimensi yang sebenarnya, perbandingan fitur berbasis tanda centang, tetapi tabel tersebut sangat cocok untuk informasi referensi (atau data lain yang dapat dinyatakan secara wajar dengan daftar definisi, bukan tabel).
  • Jika ada beberapa baris informasi tentang kunci — misalnya, jenis dan deskripsi — gabungkan setiap baris dalam <p> untuk memaksa pemisahan baris (bukan <br>).
  • Hanya boleh ada satu sel di baris header. Gunakan <th colspan="2"> untuk memaksanya agar meluas ke kedua kolom. Untuk mengingatkan Anda tentang perilaku ini, DevSite akan otomatis menyembunyikan <th> setelah yang pertama (yang sengaja terlihat sangat rusak).

Teknik ini juga berfungsi untuk tabel yang sangat kompleks, bahkan yang berisi tabel bertingkat:

Hasil render

Detail
Parameter kueri
pageSize
int32
Ukuran halaman yang diminta. Server mungkin menampilkan lebih sedikit galeri daripada yang diminta. Jika tidak ditentukan, server akan memilih default yang sesuai.
pageToken
string
Token yang mengidentifikasi halaman hasil yang harus ditampilkan server. Biasanya, ini adalah nilai nextPageToken yang ditampilkan dari panggilan sebelumnya ke metode list.
Isi permintaan
Isi permintaan harus kosong.
Otorisasi
Memerlukan setidaknya salah satu cakupan OAuth 2.0 berikut:
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
Respons
Jika berhasil, isi respons berisi data dengan struktur berikut:
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
Daftar galeri.
nextPageToken
string
Token untuk mengambil halaman hasil berikutnya. Teruskan nilai ini di kolom pageToken dalam panggilan berikutnya ke metode list untuk mengambil halaman hasil berikutnya.

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>
Memaksa ke dalam daftar isi
Menempatkan <h2> atau <h3> di dalam header tabel (<th>) akan memaksa header ke dalam daftar isi, seperti pada tabel ini. Di dalam header tabel, <h2> dan <h3> diberi gaya seperti teks biasa, sehingga pembaca tidak akan dapat mengetahuinya.

Tabel tata letak tetap

Jika memiliki tabel dengan konten yang lebih lebar dari sel tabel (seperti blok kode), Anda dapat memaksa sel tabel dengan konten tersebut untuk menerapkan scroll tambahan ke sel tabel, bukan membuat seluruh tabel di-scroll dengan menambahkan class tetap ke elemen <table>:

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

Tabel berikut menyertakan class fixed dan memiliki overflow yang diterapkan ke selnya:

Hasil render

Nama Jenis Deskripsi
value String

Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir

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

navigationType PageNavigationType Jenis navigasi pilihan

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>

Bandingkan dengan tabel di bawah yang menunjukkan perilaku tata letak default saat overflow diterapkan ke seluruh tabel:

Hasil render

Nama Jenis Deskripsi
value String

Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir

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

navigationType PageNavigationType Jenis navigasi pilihan

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>

Mengontrol lebar kolom

Secara default, tabel tata letak tetap mendistribusikan lebar keseluruhan tabel secara merata ke setiap kolomnya (yaitu, tabel tata letak tetap dengan tiga kolom menampilkan setiap kolom sebesar 33,33% dari lebar keseluruhan tabel).

Hasil render

Nama Jenis Deskripsi
value String

Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir

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

navigationType PageNavigationType Jenis navigasi pilihan

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>

Untuk mengontrol lebar kolom dalam tabel tata letak tetap, sel di baris pertama tabel harus menyertakan salah satu dari hal berikut:

atribut lebar yang nilainya berupa persentase (20%) atau dalam piksel (240px) elemen <colgroup> dengan elemen turunan <col> yang memiliki atribut width yang ditetapkan pada elemen tersebut Untuk hasil terbaik, jangan tetapkan width pada elemen <col> terakhir atau sel tabel terakhir karena browser menghitung nilai ini untuk Anda.

Lebar pada sel tabel

Hasil render

Nama Jenis Deskripsi
value String

Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir

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

navigationType PageNavigationType Jenis navigasi pilihan

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>

Lebar pada elemen

Hasil render

Nama Jenis Deskripsi
value String

Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir

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

navigationType PageNavigationType Jenis navigasi pilihan

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>

Tabel responsif tata letak tetap

Anda juga dapat menggabungkan tabel tata letak tetap dengan tabel responsif jika menggunakan opsi <colgroup> dan <col> untuk menetapkan atribut lebar:

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

Hasil render

Parameter
valueString
Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir 
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
Jenis navigasi pilihan

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>

Tabel lebar penuh

DevSite mendukung tabel yang mencakup seluruh lebar halaman dengan menggunakan <table class="full-width">...</table> pada tabel tingkat teratas (yaitu, tabel pada tingkat hierarki yang sama dengan judul halaman):

Nama Jenis Deskripsi
nilai String Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir
navigationType PageNavigationType Jenis navigasi pilihan

Tabel dengan aturan vertikal

Anda dapat menampilkan aturan vertikal antara setiap <th> dan <td> di baris tabel menggunakan <table class="vertical-rules">...</table>:

Nama Jenis Deskripsi
nilai String Nilai pilihan, yang dilihat responden sebagai label saat melihat formulir
navigationType PageNavigationType Jenis navigasi pilihan

Teks dalam kolom

Anda dapat mengatur teks dalam kolom dan menghapus semua gaya dari <table> menggunakan <table class="columns">...</table>. Ini biasanya digunakan untuk mengatur daftar panjang dan sempit.

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>

Warna tabel

Tabel standar diwarnai seperti di atas, dan beberapa warna lain tersedia menggunakan class blue, cyan, green, orange, pink, dan purple.

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

Beberapa warna dalam satu tabel tidak didukung, tetapi nama class warna tabel dapat digabungkan dengan opsi nama class tabel lainnya yang disebutkan di atas.

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
Biru
key type
Beberapa informasi tentang key.
Sian
key type
Beberapa informasi tentang key.
Hijau
key type
Beberapa informasi tentang key.
Orange
key type
Beberapa informasi tentang key.
Merah Muda
key type
Beberapa informasi tentang key.
Ungu
key type
Beberapa informasi tentang key.

Warna baris alternatif

Untuk mengganti warna baris latar belakang di tabel, tambahkan class alternating-odd-rows atau alternating-even-rows ke elemen <table>.

Baris ganjil bergantian

<table class="alternating-odd-rows">
Nama Deskripsi
One Fish This is a description of One Fish
Two Fish This is a description of Two Fish
Ikan Merah This is a description of Red Fish
Ikan Biru Ini adalah deskripsi Blue Fish
Ikan Lainnya This is a description of Other Fish

Baris genap alternatif

Dalam contoh ini, warna dari warna tabel juga diterapkan ke tabel melalui class green.

<table class="alternating-even-rows green">
Nama Deskripsi
One Fish This is a description of One Fish
Two Fish This is a description of Two Fish
Ikan Merah This is a description of Red Fish
Ikan Biru Ini adalah deskripsi Blue Fish
Ikan Lainnya This is a description of Other Fish