יש תמיכה בטבלאות עם סימון סטנדרטי. זוהי טבלה רגילה עם שורת כותרת, כמה שורות רגילות ושורה שמסומנת בתווית <tr class="alt">
, שמניבה רקע כהה יותר שאפשר להשתמש בו ככותרת חלופית.
עיבוד
One | שתיים | שלוש |
---|---|---|
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"
, הטבלאות צריכות להיות מובנות באופן מסוים:
- בטבלה יכולות להיות רק שתי עמודות: העמודה הראשונה מיועדת לדברים שמוגדרים (המפתח), והעמודה השנייה מיועדת לכל המידע על המפתח הזה, בכמה שורות אם יש צורך. ההגבלה על שתי עמודות מובילה לכך שלא ניתן להשתמש בטבלאות עם תצוגה רספונסיבית לנתונים טבלאיים דו-ממדיים אמיתיים, להשוואה בין תכונות שמבוססת על סימני וי, אבל הן מתאימות מאוד למידע עזר (או לכל נתון אחר שאפשר להביע באופן סביר באמצעות רשימת הגדרות במקום טבלה).
- אם יש כמה שורות מידע על המפתח – למשל, סוג ותיאור – צריך להשתמש ב-
<p>
בכל שורה כדי לאלץ הפסקות שורה (במקום<br>
). - בשורת הכותרת צריך להיות תא אחד בלבד. משתמשים ב-
<th colspan="2">
כדי לאלץ אותו להשתרע על שתי העמודות. כדי להזכיר לכם את ההתנהגות הזו, המערכת של DevSite מסתירה באופן אוטומטי כל<th>
אחרי הראשון (שנראה מכוון מאוד שבור).
הטכניקה הזו עובדת גם בטבלאות מורכבות מאוד, גם כאלה שמכילות טבלאות עץ:
עיבוד
פרטים | |||||
---|---|---|---|---|---|
פרמטרים של שאילתה |
|
||||
גוף הבקשה |
גוף הבקשה חייב להיות ריק.
|
||||
אישור |
נדרש לפחות אחד מההיקפים הבאים של 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 |
||||
תשובה |
אם הפעולה מצליחה, גוף התגובה מכיל נתונים עם המבנה הבא:
{ "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>
שליטה ברוחב העמודות
כברירת מחדל, בטבלאות עם פריסה קבועה, רוחב הטבלה הכולל מחולק באופן שווה בין כל העמודות (כלומר, בטבלה עם פריסה קבועה עם שלוש עמודות, כל עמודה תוצג ב-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>
כדי לקבוע את רוחב העמודות בטבלה עם פריסה קבועה, התאים בשורה הראשונה של הטבלה חייבים לכלול אחד מהפרטים הבאים:
מאפייני רוחב שהערכים שלהם הם אחוזים (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>
בטבלאות ברמה העליונה (כלומר, טבלאות שנמצאות באותה רמה היררכית כמו כותרות הדף):
שם | סוג | תיאור |
---|---|---|
ערך | מחרוזת | הערך של האפשרות, שמוצג למשיבים בתור תווית כשהם צופים בטופס |
navigationType | PageNavigationType |
סוג הניווט של האפשרות שנבחרה |
טבלאות עם קווים אנכיים
אפשר להציג קווים אנכיים בין כל <th>
ל-<td>
בשורה בטבלה באמצעות <table class="vertical-rules">...</table>
:
שם | סוג | תיאור |
---|---|---|
ערך | מחרוזת | הערך של האפשרות, שמוצג למשיבים בתור תווית כשהם צופים בטופס |
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 |
שני דגים | זהו תיאור של Two Fish |
דג אדום | זהו תיאור של Red Fish |
דג כחול | זהו תיאור של Blue Fish |
דגים אחרים | זהו תיאור של Other Fish |
שורות אי זוגיות לסירוגין
בדוגמה הזו, צבע מ-table colors מיושם גם על הטבלה באמצעות הכיתה green
.
<table class="alternating-even-rows green">
שם | תיאור |
---|---|
דג אחד | זהו תיאור של One Fish |
שני דגים | זהו תיאור של Two Fish |
דג אדום | זהו תיאור של Red Fish |
דג כחול | זהו תיאור של Blue Fish |
דגים אחרים | זהו תיאור של Other Fish |