ตาราง

รองรับตารางที่มีมาร์กอัปมาตรฐาน ตารางทั่วไปที่มีแถวส่วนหัว แถวปกติหลายแถว และแถวที่มีการทำเครื่องหมายเป็น <tr class="alt"> ซึ่งทำให้พื้นหลังเข้มขึ้นและใช้เป็นส่วนหัวสำรองได้

แสดงผลแล้ว

1 2 3
1.0 2.0 3.0
1.1 2.1 3.1
มาดูตัวเลขที่ลงท้ายด้วย .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>```

ตารางที่ปรับเปลี่ยนตามอุปกรณ์

DevSite รองรับตารางที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งแสดงผลแตกต่างกันในหน้าจอขนาดเล็ก ตารางอ้างอิงปกติมีดังนี้

แสดงผลแล้ว

ชื่อ ประเภท คำอธิบาย
value String ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกำกับเมื่อดูแบบฟอร์ม
navigationType PageNavigationType ประเภทการนําทางของตัวเลือก

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>

และนี่คือตารางเดียวกันที่ปรับให้ใช้ class="responsive" หากคุณย่อหน้าต่างเบราว์เซอร์ให้แคบลง หน้าต่างจะแสดงในแนวตั้งแทนแนวนอน

แสดงผลแล้ว

พารามิเตอร์
valueString
ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกำกับเมื่อดูแบบฟอร์ม
navigationTypePageNavigationType
ประเภทการนําทางของตัวเลือก

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" ตารางต้องได้รับการจัดโครงสร้างในลักษณะหนึ่งๆ ดังนี้

  • ตารางต้องมีเพียง 2 คอลัมน์เท่านั้น ได้แก่ คอลัมน์แรกสำหรับสิ่งที่จะกําหนด (คีย์) และคอลัมน์ที่ 2 สําหรับข้อมูลทั้งหมดเกี่ยวกับคีย์นั้นในหลายบรรทัด หากจําเป็น ข้อจำกัด 2 คอลัมน์นี้หมายความว่าคุณจะใช้ตารางที่ปรับเปลี่ยนขนาดได้กับข้อมูลตาราง 2 มิติอย่างแท้จริง การเปรียบเทียบฟีเจอร์ตามเครื่องหมายถูกไม่ได้ แต่เหมาะสําหรับข้อมูลอ้างอิง (หรือข้อมูลอื่นๆ ที่แสดงรายการคําจํากัดความแทนตารางได้)
  • หากมีข้อมูลเกี่ยวกับคีย์หลายบรรทัด เช่น ประเภทและคําอธิบาย ให้ตัดแต่ละบรรทัดใน <p> เพื่อบังคับให้ตัดบรรทัด (แทนที่จะเป็น <br>)
  • แถวส่วนหัวต้องมีเพียงเซลล์เดียว ใช้ <th colspan="2"> เพื่อบังคับให้ข้อความนั้นครอบคลุมทั้ง 2 คอลัมน์ เพื่อเป็นการช่วยเตือนคุณเกี่ยวกับลักษณะการทํางานนี้ DevSite จะซ่อน <th> หลังรายการแรกโดยอัตโนมัติ (ซึ่งตั้งใจให้ดูไม่เรียบร้อยมาก)

เทคนิคนี้ยังใช้ได้กับตารางที่ซับซ้อนมากด้วย แม้แต่ตารางที่มีตารางที่ฝังอยู่

แสดงผลแล้ว

รายละเอียด
พารามิเตอร์การค้นหา
pageSize
int32
ขนาดหน้าเว็บที่ขอ เซิร์ฟเวอร์อาจแสดงชั้นวางน้อยกว่าที่ขอ หากไม่ระบุ เซิร์ฟเวอร์จะเลือกค่าเริ่มต้นที่เหมาะสม
pageToken
string
โทเค็นที่ระบุหน้าผลการค้นหาที่เซิร์ฟเวอร์ควรแสดง โดยปกติแล้ว ค่านี้คือค่าของ nextPageToken ที่แสดงผลจากการเรียกใช้เมธอด list ก่อนหน้านี้
เนื้อหาของคำขอ
เนื้อหาของคำขอต้องว่างเปล่า
การให้สิทธิ์
ต้องใช้ขอบเขต OAuth 2.0 ต่อไปนี้อย่างน้อย 1 รายการ
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
คำตอบ
หากทำสำเร็จ เนื้อหาการตอบกลับจะมีข้อมูลซึ่งมีโครงสร้างดังต่อไปนี้
{
  "shelves": Shelf[],
  "nextPageToken": string,
}
shelves
รายการชั้นวาง
nextPageToken
string
โทเค็นสําหรับดึงข้อมูลหน้าถัดไปของผลการค้นหา ส่งค่านี้ในช่อง pageToken ในการเรียกใช้เมธอด list ครั้งถัดไปเพื่อดึงข้อมูลหน้าถัดไป

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>
การบังคับให้ใส่ในสารบัญ
การวาง <h2> หรือ <h3> ไว้ภายในส่วนหัวของตาราง (<th>) จะบังคับให้ส่วนหัวนั้นอยู่ในสารบัญ เช่นเดียวกับตารางนี้ ส่วนภายในส่วนหัวของตาราง <h2> และ <h3> จะมีการจัดรูปแบบเหมือนกับข้อความปกติ ผู้อ่านจึงแยกไม่ออก

ตารางที่มีเลย์เอาต์แบบคงที่

หากมีตารางที่มีเนื้อหากว้างกว่าเซลล์ตาราง (เช่น บล็อกโค้ด) คุณสามารถบังคับให้เซลล์ตารางที่มีเนื้อหาดังกล่าวใช้การเลื่อนแบบแสดงผลเกินไปยังเซลล์ตารางแทนการเลื่อนทั้งตารางได้โดยการเพิ่มคลาสแบบคงที่ลงในองค์ประกอบ <table> ดังนี้

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

ตารางต่อไปนี้มีคลาส fixed และมีการใช้การเลื่อนออกกับเซลล์

แสดงผลแล้ว

ชื่อ ประเภท คำอธิบาย
value String

ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกำกับเมื่อดูแบบฟอร์ม

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

navigationType PageNavigationType ประเภทการนําทางของตัวเลือก

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>

เปรียบเทียบกับตารางด้านล่างซึ่งแสดงลักษณะการทำงานเริ่มต้นของเลย์เอาต์ที่มีการใช้การเลื่อนออกกับทั้งตาราง

แสดงผลแล้ว

ชื่อ ประเภท คำอธิบาย
value String

ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกำกับเมื่อดูแบบฟอร์ม

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

navigationType PageNavigationType ประเภทการนําทางของตัวเลือก

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>

การควบคุมความกว้างของคอลัมน์

โดยค่าเริ่มต้น ตารางแบบเลย์เอาต์คงที่จะกระจายความกว้างโดยรวมของตารางไปยังแต่ละคอลัมน์อย่างเท่าๆ กัน (กล่าวคือ ตารางแบบเลย์เอาต์คงที่ซึ่งมี 3 คอลัมน์จะแสดงแต่ละคอลัมน์ที่ 33.33% ของความกว้างโดยรวมของตาราง)

แสดงผลแล้ว

ชื่อ ประเภท คำอธิบาย
value String

ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกำกับเมื่อดูแบบฟอร์ม

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

navigationType PageNavigationType ประเภทการนําทางของตัวเลือก

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>

หากต้องการควบคุมความกว้างของคอลัมน์ในตารางเลย์เอาต์คงที่ เซลล์ในแถวแรกของตารางต้องมีรายการใดรายการหนึ่งต่อไปนี้

แอตทริบิวต์ width ที่มีค่าเป็นเปอร์เซ็นต์ (20%) หรือเป็นพิกเซล (240px) องค์ประกอบ <colgroup> ที่มีองค์ประกอบย่อย <col> ที่ตั้งค่าแอตทริบิวต์ width ไว้แล้ว หากต้องการให้ได้ผลลัพธ์ที่ดีที่สุด อย่าตั้งค่า width ในองค์ประกอบ <col> สุดท้ายหรือเซลล์ตารางสุดท้าย เนื่องจากเบราว์เซอร์จะคำนวณค่านี้ให้คุณ

ความกว้างของเซลล์ตาราง

แสดงผลแล้ว

ชื่อ ประเภท คำอธิบาย
value String

ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกำกับเมื่อดูแบบฟอร์ม

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

navigationType PageNavigationType ประเภทการนําทางของตัวเลือก

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>

ความกว้างขององค์ประกอบ

แสดงผลแล้ว

ชื่อ ประเภท คำอธิบาย
value String

ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกำกับเมื่อดูแบบฟอร์ม

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

navigationType PageNavigationType ประเภทการนําทางของตัวเลือก

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>

ตารางที่ปรับเปลี่ยนตามอุปกรณ์แบบเลย์เอาต์คงที่

นอกจากนี้ คุณยังรวมตารางรูปแบบคงที่เข้ากับตารางที่ปรับเปลี่ยนตามพื้นที่โฆษณาได้หากใช้ตัวเลือก <colgroup> และ <col> เพื่อตั้งค่าแอตทริบิวต์ความกว้าง ดังนี้

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

แสดงผลแล้ว

พารามิเตอร์
valueString
ค่าของตัวเลือกที่ผู้ตอบเห็นเป็นป้ายกํากับเมื่อดูแบบฟอร์ม
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table.
navigationType PageNavigationType
ประเภทการนําทางของตัวเลือก

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>

ตารางแบบเต็มความกว้าง

DevSite รองรับตารางที่ครอบคลุมความกว้างทั้งหน้าโดยใช้ <table class="full-width">...</table> ในตารางระดับบนสุด (นั่นคือ ตารางที่อยู่ในลําดับชั้นเดียวกับส่วนหัวของหน้า) ดังนี้

ชื่อ ประเภท คำอธิบาย
value สตริง ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกํากับเมื่อดูแบบฟอร์ม
navigationType PageNavigationType ประเภทการนําทางของตัวเลือก

ตารางที่มีเส้นแนวตั้ง

คุณแสดงเส้นแนวตั้งระหว่าง <th> กับ <td> แต่ละรายการในแถวตารางได้โดยใช้ <table class="vertical-rules">...</table> ดังนี้

ชื่อ ประเภท คำอธิบาย
value สตริง ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกํากับเมื่อดูแบบฟอร์ม
navigationType PageNavigationType ประเภทการนําทางของตัวเลือก

ข้อความในคอลัมน์

คุณสามารถจัดเรียงข้อความเป็นคอลัมน์และนำการจัดรูปแบบทั้งหมดออกจาก <table> ได้โดยใช้ <table class="columns">...</table> ซึ่งโดยปกติจะใช้จัดเรียงรายการที่ยาวและแคบ

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>

สีตาราง

ตารางมาตรฐานมีสีดังที่แสดงด้านบน และมีสีอื่นๆ อีกหลายสีที่ใช้ได้โดยใช้คลาส blue, cyan, green, orange, pink และ purple

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

ระบบไม่รองรับการใช้หลายสีในตารางเดียว แต่คุณสามารถใช้ชื่อคลาสสีของตารางร่วมกับตัวเลือกชื่อคลาสของตารางอื่นๆ ที่กล่าวถึงข้างต้นได้

<table class="blue responsive">...</table>
<table class="blue responsive fixed">...</table>
<table class="blue vertical-rules">...</table>
น้ำเงิน
key type
ข้อมูลบางส่วนเกี่ยวกับ key
ฟ้า
key type
ข้อมูลบางส่วนเกี่ยวกับ key
เขียว
key type
ข้อมูลบางส่วนเกี่ยวกับ key
Orange
key type
ข้อมูลบางส่วนเกี่ยวกับ key
ชมพู
key type
ข้อมูลบางส่วนเกี่ยวกับ key
ม่วง
key type
ข้อมูลบางส่วนเกี่ยวกับ key

สลับสีแถว

หากต้องการสลับสีพื้นหลังของแถวในตาราง ให้เพิ่มคลาส alternating-odd-rows หรือ alternating-even-rows ลงในองค์ประกอบ <table>

สลับแถวที่ไม่ใช่คู่

<table class="alternating-odd-rows">
ชื่อ คำอธิบาย
One Fish นี่คือคำอธิบายของ One Fish
Two Fish นี่คือคำอธิบายของ Two Fish
ปลาสีแดง นี่คือคำอธิบายของปลาสีแดง
Blue Fish นี่คือคำอธิบายของปลาบลูฟิช
ปลาอื่นๆ นี่คือคำอธิบายของปลาอื่นๆ

สลับแถวคู่

ในตัวอย่างนี้ ระบบจะใช้สีจากสีตารางกับตารางผ่านคลาส green ด้วย

<table class="alternating-even-rows green">
ชื่อ คำอธิบาย
One Fish นี่คือคำอธิบายของ One Fish
Two Fish นี่คือคำอธิบายของ Two Fish
ปลาสีแดง นี่คือคำอธิบายของปลาสีแดง
Blue Fish นี่คือคำอธิบายของปลาบลูฟิช
ปลาอื่นๆ นี่คือคำอธิบายของปลาอื่นๆ