جداول با نشانه گذاری استاندارد پشتیبانی می شوند. در اینجا یک جدول معمولی با یک ردیف عنوان، چندین ردیف منظم، و یک ردیف با علامت <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>
را بعد از اولین (که عمداً بسیار خراب به نظر می رسد) پنهان می کند.
این تکنیک همچنین برای جداول بسیار پیچیده، حتی آنهایی که حاوی جداول تو در تو هستند، کار می کند:
ارائه شده است
جزئیات | |||||
---|---|---|---|---|---|
پارامترهای پرس و جو |
| ||||
درخواست بدن | بدنه درخواست باید خالی باشد. | ||||
مجوز | حداقل به یکی از حوزههای 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>
برای کنترل عرض ستونها در جدول با طرح ثابت، سلولهای ردیف اول جدول باید شامل یکی از موارد زیر باشد:
ویژگی(های) 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">
نام | توضیحات |
---|---|
یک ماهی | این توصیفی از یک ماهی است |
دو ماهی | این توصیف دو ماهی است |
ماهی قرمز | این توصیف ماهی قرمز است |
ماهی آبی | این توصیف ماهی آبی است |
ماهی های دیگر | این شرح ماهی های دیگر است |