جداول

جداول با نشانه گذاری استاندارد پشتیبانی می شوند. در اینجا یک جدول معمولی با یک ردیف عنوان، چندین ردیف منظم، و یک ردیف با علامت <tr class="alt"> دارد که پس‌زمینه تیره‌تری تولید می‌کند که می‌تواند به عنوان سرصفحه جایگزین استفاده شود.

ارائه شده است

یکی دو سه
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> را بعد از اولین (که عمداً بسیار خراب به نظر می رسد) پنهان می کند.

این تکنیک همچنین برای جداول بسیار پیچیده، حتی آنهایی که حاوی جداول تو در تو هستند، کار می کند:

ارائه شده است

جزئیات
پارامترهای پرس و جو
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>

برای کنترل عرض ستون‌ها در جدول با طرح ثابت، سلول‌های ردیف اول جدول باید شامل یکی از موارد زیر باشد:

ویژگی(های) 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> در جداول سطح بالا (یعنی جداول در همان سطح سلسله مراتبی با عنوان صفحه) در بر می گیرند:

نام تایپ کنید توضیحات
ارزش رشته مقدار انتخاب، که پاسخ دهندگان هنگام مشاهده فرم آن را به عنوان یک برچسب می بینند
نوع ناوبری PageNavigationType نوع ناوبری انتخاب

جداول با قوانین عمودی

با استفاده از <table class="vertical-rules">...</table> می توانید قوانین عمودی را بین هر <th> و <td> در یک ردیف جدول نمایش دهید:

نام تایپ کنید توضیحات
ارزش رشته مقدار انتخاب، که پاسخ دهندگان هنگام مشاهده فرم آن را به عنوان یک برچسب می بینند
نوع ناوبری PageNavigationType نوع ناوبری انتخاب

متن در ستون

با استفاده از <table class="columns">...</table> می‌توانید متن را در ستون‌ها مرتب کنید و تمام استایل‌ها را از یک <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
نارنجی
key type
برخی اطلاعات در مورد key
صورتی
key type
اطلاعاتی در مورد key
بنفش
key type
اطلاعاتی در مورد key

رنگ های ردیف جایگزین

برای تغییر رنگ‌های ردیف پس‌زمینه در جدول خود، یک کلاس alternating-odd-rows یا alternating-even-rows به عنصر <table> اضافه کنید.

ردیف های فرد متناوب

<table class="alternating-odd-rows">
نام توضیحات
یک ماهی این توصیفی از یک ماهی است
دو ماهی این توصیف دو ماهی است
ماهی قرمز این توصیف ماهی قرمز است
ماهی آبی این توصیف ماهی آبی است
ماهی های دیگر این شرح ماهی های دیگر است

ردیف های زوج متناوب

در این مثال، رنگی از رنگ های جدول نیز از طریق کلاس green به جدول اعمال می شود.

<table class="alternating-even-rows green">
نام توضیحات
یک ماهی این توصیفی از یک ماهی است
دو ماهی این توصیف دو ماهی است
ماهی قرمز این توصیف ماهی قرمز است
ماهی آبی این توصیف ماهی آبی است
ماهی های دیگر این شرح ماهی های دیگر است