میزیں

میزیں معیاری مارک اپ کے ساتھ معاون ہیں۔ یہاں ایک عام ٹیبل ہے جس میں سرخی کی قطار، کئی باقاعدہ قطاریں، اور <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> خود بخود چھپا دیتا ہے (جو جان بوجھ کر بہت ٹوٹا ہوا نظر آتا ہے)۔

یہ تکنیک بہت پیچیدہ جدولوں کے لیے بھی کام کرتی ہے، یہاں تک کہ ان میں بھی جن میں نیسٹڈ ٹیبل ہوتے ہیں:

پیش کیا گیا۔

تفصیلات
استفسار کے پیرامیٹرز
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
نتائج کے اگلے صفحے کو بازیافت کرنے کے لیے ایک ٹوکن۔ نتائج کے اگلے صفحے کو بازیافت کرنے کے لیے list کے طریقہ کار پر بعد میں کال میں pageToken فیلڈ میں اس قدر کو پاس کریں۔

ایچ ٹی ایم ایل

<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 ) میں ایک <colgroup> عنصر جس میں <col> چائلڈ عناصر ہیں جن پر 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> استعمال کر کے ٹاپ لیول ٹیبلز پر (یعنی، ٹیبلز صفحہ کی سرخیوں کی طرح ایک ہی درجہ بندی کی سطح پر):

نام قسم تفصیل
قدر تار انتخاب کی قدر، جسے جواب دہندگان فارم کو دیکھتے وقت بطور لیبل دیکھتے ہیں۔
نیویگیشن کی قسم 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 کے بارے میں کچھ معلومات۔

قطار کے متبادل رنگ

اپنے ٹیبل میں پس منظر کی قطار کے رنگوں کو تبدیل کرنے کے لیے، <table> عنصر میں alternating-odd-rows یا alternating-even-rows کلاس شامل کریں۔

متبادل قطاریں

<table class="alternating-odd-rows">
نام تفصیل
ایک مچھلی یہ ایک مچھلی کی تفصیل ہے۔
دو مچھلیاں یہ دو مچھلیوں کی تفصیل ہے۔
سرخ مچھلی یہ سرخ مچھلی کی تفصیل ہے۔
نیلی مچھلی یہ نیلی مچھلی کی تفصیل ہے۔
دوسری مچھلی یہ دوسری مچھلیوں کی تفصیل ہے۔

برابر قطاروں کو تبدیل کرنا

اس مثال میں، ٹیبل کے رنگوں سے ایک رنگ بھی ٹیبل پر green کلاس کے ذریعے لگایا جاتا ہے۔

<table class="alternating-even-rows green">
نام تفصیل
ایک مچھلی یہ ایک مچھلی کی تفصیل ہے۔
دو مچھلیاں یہ دو مچھلیوں کی تفصیل ہے۔
سرخ مچھلی یہ سرخ مچھلی کی تفصیل ہے۔
نیلی مچھلی یہ نیلی مچھلی کی تفصیل ہے۔
دوسری مچھلی یہ دوسری مچھلیوں کی تفصیل ہے۔