टेबल, स्टैंडर्ड मार्कअप के साथ काम करती हैं. यहां एक सामान्य टेबल दी गई है, जिसमें हेडिंग वाली एक पंक्ति, कई सामान्य पंक्तियां, और <tr class="alt">
के तौर पर मार्क की गई एक पंक्ति है. इस पंक्ति का बैकग्राउंड गहरे रंग का होता है और इसका इस्तेमाल वैकल्पिक हेडर के तौर पर किया जा सकता है.
रेंडर किया गया
एक | दो | तीन |
---|---|---|
1.0 | 2.0 | 3.0 |
1.1 | 2.1 | 3.1 |
यहां कुछ ऐसे नंबर दिए गए हैं जिनका आखिरी अंक .2 है! | ||
1.2 | 2.2 | 3.2 |
एचटीएमएल
<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 |
चुने गए नेविगेशन का टाइप |
एचटीएमएल
<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 चुनी गई वैल्यू का नेविगेशन टाइप |
एचटीएमएल
<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>
के बाद किसी भी<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, }
|
एचटीएमएल
<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>
विषय सूची में शामिल करना |
---|
टेबल हेडर (<th> ) में <h2> या <h3> डालने पर, हेडर को विषय सूची में शामिल कर दिया जाएगा, जैसा कि इस टेबल में किया गया है. टेबल हेडर में,
<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 |
चुने गए नेविगेशन का टाइप |
एचटीएमएल
<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 |
चुने गए नेविगेशन का टाइप |
एचटीएमएल
<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 |
चुने गए नेविगेशन का टाइप |
एचटीएमएल
<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
) में हो
<col>
चाइल्ड एलिमेंट वाला <colgroup>
एलिमेंट, जिन पर width
एट्रिब्यूट सेट हों
सबसे अच्छे नतीजे पाने के लिए, आखिरी <col>
एलिमेंट या आखिरी टेबल सेल पर width
सेट न करें, क्योंकि ब्राउज़र आपके लिए इस वैल्यू का हिसाब लगाता है.
टेबल सेल की चौड़ाई
रेंडर किया गया
नाम | टाइप | ब्यौरा |
---|---|---|
value |
String |
विकल्प की वैल्यू, जो जवाब देने वाले लोगों को फ़ॉर्म देखते समय लेबल के तौर पर दिखती है
Because this table has a 'fixed' class, this code block has overflow scrolling instead of the entire table. |
navigationType |
PageNavigationType |
चुने गए नेविगेशन का टाइप |
एचटीएमएल
<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 |
चुने गए नेविगेशन का टाइप |
एचटीएमएल
<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 चुनी गई वैल्यू का नेविगेशन टाइप |
एचटीएमएल
<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>
का इस्तेमाल करके, पेज की पूरी चौड़ाई में फैली टेबल के साथ काम करता है:
नाम | टाइप | ब्यौरा |
---|---|---|
value | स्ट्रिंग | विकल्प की वैल्यू, जो जवाब देने वाले लोगों को फ़ॉर्म देखते समय लेबल के तौर पर दिखती है |
navigationType | PageNavigationType |
चुने गए नेविगेशन का टाइप |
वर्टिकल नियमों वाली टेबल
<table class="vertical-rules">...</table>
का इस्तेमाल करके, टेबल की पंक्ति में हर <th>
और <td>
के बीच वर्टिकल रूलर दिखाए जा सकते हैं:
नाम | टाइप | ब्यौरा |
---|---|---|
value | स्ट्रिंग | विकल्प की वैल्यू, जो जवाब देने वाले लोगों को फ़ॉर्म देखते समय लेबल के तौर पर दिखती है |
navigationType | 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 के बारे में कुछ जानकारी. |
Orange | |
---|---|
key |
type key के बारे में कुछ जानकारी. |
गुलाबी | |
---|---|
key |
type key के बारे में कुछ जानकारी. |
बैंगनी | |
---|---|
key |
type key के बारे में कुछ जानकारी. |
पंक्तियों के लिए अलग-अलग रंग चुनना
अपनी टेबल में, पंक्ति के बैकग्राउंड के रंग बदलने के लिए, <table>
एलिमेंट में alternating-odd-rows
या alternating-even-rows
क्लास जोड़ें.
अलग-अलग रंगों में विषम पंक्तियां
<table class="alternating-odd-rows">
नाम | ब्यौरा |
---|---|
One Fish | यह One Fish के बारे में जानकारी है |
Two Fish | यह Two Fish के बारे में जानकारी है |
Red Fish | यह लाल मछली की जानकारी है |
Blue Fish | यह ब्लू फ़िश के बारे में जानकारी है |
अन्य मछलियां | यह अन्य मछलियों के बारे में जानकारी है |
वैकल्पिक रूप से, पंक्तियों के रंग बदलना
इस उदाहरण में, green
क्लास की मदद से टेबल पर टेबल के रंग में से कोई रंग भी लागू किया गया है.
<table class="alternating-even-rows green">
नाम | ब्यौरा |
---|---|
One Fish | यह One Fish के बारे में जानकारी है |
Two Fish | यह Two Fish के बारे में जानकारी है |
Red Fish | यह लाल मछली की जानकारी है |
Blue Fish | यह ब्लू फ़िश के बारे में जानकारी है |
अन्य मछलियां | यह अन्य मछलियों के बारे में जानकारी है |