تتوفّر الجداول باستخدام الترميز العادي. في ما يلي جدول نموذجي يتضمّن صف عنوان وعدة صفوف عادية وصفًا تم وضع علامة عليه <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"
. إذا ضيقت نافذة المتصفّح، ستظهر بالوضع العمودي بدلاً من الوضع الأفقي:
تم عرضها
المعلمات | |
---|---|
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 | هذا وصف لـ 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 |
أسماك أخرى | هذا وصف لـ "أسماك أخرى". |