الجداول

تتوفّر الجداول باستخدام الترميز العادي. في ما يلي جدول نموذجي يتضمّن صف عنوان وعدة صفوف عادية وصفًا تم وضع علامة عليه <tr class="alt">، ما ينتج عنه خلفية أغمق يمكن استخدامها كعنوان بديل.

تم عرضها

واحد اثنان ثلاثة
1 2.0 3
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 هذا وصف لـ One Fish
سمكتان هذا وصف لـ Two Fish
سمك أحمر هذا وصف لـ Red Fish
Blue Fish هذا وصف لـ Blue Fish
أسماك أخرى هذا وصف لـ "أسماك أخرى".

صفوف فردية بديلة

في هذا المثال، يتم أيضًا تطبيق لون من ألوان الجدول على الجدول من خلال فئة green.

<table class="alternating-even-rows green">
الاسم الوصف
One Fish هذا وصف لـ One Fish
سمكتان هذا وصف لـ Two Fish
سمك أحمر هذا وصف لـ Red Fish
Blue Fish هذا وصف لـ Blue Fish
أسماك أخرى هذا وصف لـ "أسماك أخرى".