טבלאות

יש תמיכה בטבלאות עם סימון סטנדרטי. זוהי טבלה רגילה עם שורת כותרת, כמה שורות רגילות ושורה שמסומנת בתווית <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". אם תצמצמו את חלון הדפדפן, הוא יוצג בפריסה אנכית במקום אופקית:

עיבוד

פרמטרים
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", הטבלאות צריכות להיות מובנות באופן מסוים:

  • בטבלה יכולות להיות רק שתי עמודות: העמודה הראשונה מיועדת לדברים שמוגדרים (המפתח), והעמודה השנייה מיועדת לכל המידע על המפתח הזה, בכמה שורות אם יש צורך. ההגבלה על שתי עמודות מובילה לכך שלא ניתן להשתמש בטבלאות עם תצוגה רספונסיבית לנתונים טבלאיים דו-ממדיים אמיתיים, להשוואה בין תכונות שמבוססת על סימני וי, אבל הן מתאימות מאוד למידע עזר (או לכל נתון אחר שאפשר להביע באופן סביר באמצעות רשימת הגדרות במקום טבלה).
  • אם יש כמה שורות מידע על המפתח – למשל, סוג ותיאור – צריך להשתמש ב-<p> בכל שורה כדי לאלץ הפסקות שורה (במקום <br>).
  • בשורת הכותרת צריך להיות תא אחד בלבד. משתמשים ב-<th colspan="2"> כדי לאלץ אותו להשתרע על שתי העמודות. כדי להזכיר לכם את ההתנהגות הזו, המערכת של DevSite מסתירה באופן אוטומטי כל <th> אחרי הראשון (שנראה מכוון מאוד שבור).

הטכניקה הזו עובדת גם בטבלאות מורכבות מאוד, גם כאלה שמכילות טבלאות עץ:

עיבוד

פרטים
פרמטרים של שאילתה
pageSize
int32
גודל הדף המבוקש. יכול להיות שהשרת יחזיר פחות מדפים מהמספר שביקשת. אם לא מציינים ערך, השרת יבחר ברירת מחדל מתאימה.
pageToken
string
אסימון שמזהה דף תוצאות שהשרת אמור להציג. בדרך כלל, זהו הערך של nextPageToken שהוחזר מהקריאה הקודמת לשיטה list.
גוף הבקשה
גוף הבקשה חייב להיות ריק.
אישור
נדרש לפחות אחד מההיקפים הבאים של 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,
}
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>

שליטה ברוחב העמודות

כברירת מחדל, בטבלאות עם פריסה קבועה, רוחב הטבלה הכולל מחולק באופן שווה בין כל העמודות (כלומר, בטבלה עם פריסה קבועה עם שלוש עמודות, כל עמודה תוצג ב-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>

עיבוד

פרמטרים
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> בטבלאות ברמה העליונה (כלומר, טבלאות שנמצאות באותה רמה היררכית כמו כותרות הדף):

שם סוג תיאור
ערך מחרוזת הערך של האפשרות, שמוצג למשיבים בתור תווית כשהם צופים בטופס
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