รองรับตารางที่มีมาร์กอัปมาตรฐาน ตารางทั่วไปที่มีแถวส่วนหัว แถวปกติหลายแถว และแถวที่มีการทำเครื่องหมายเป็น <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"
หากคุณย่อหน้าต่างเบราว์เซอร์ให้แคบลง หน้าต่างจะแสดงในแนวตั้งแทนแนวนอน
แสดงผลแล้ว
พารามิเตอร์ | |
---|---|
value | String ค่าของตัวเลือกที่ผู้ตอบจะเห็นเป็นป้ายกำกับเมื่อดูแบบฟอร์ม |
navigationType | PageNavigationType ประเภทการนําทางของตัวเลือก |
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>
หลังรายการแรกโดยอัตโนมัติ (ซึ่งตั้งใจให้ดูไม่เรียบร้อยมาก)
เทคนิคนี้ยังใช้ได้กับตารางที่ซับซ้อนมากด้วย แม้แต่ตารางที่มีตารางที่ฝังอยู่
แสดงผลแล้ว
รายละเอียด | |||||
---|---|---|---|---|---|
พารามิเตอร์การค้นหา |
|
||||
เนื้อหาของคำขอ |
เนื้อหาของคำขอต้องว่างเปล่า
|
||||
การให้สิทธิ์ |
ต้องใช้ขอบเขต 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, }
|
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>
แสดงผลแล้ว
พารามิเตอร์ | |
---|---|
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="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 | นี่คือคำอธิบายของปลาบลูฟิช |
ปลาอื่นๆ | นี่คือคำอธิบายของปลาอื่นๆ |