সারণি স্ট্যান্ডার্ড মার্কআপ সহ সমর্থিত। এখানে একটি শিরোনাম সারি, বেশ কয়েকটি নিয়মিত সারি, এবং <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>
লুকিয়ে রাখে (যা ইচ্ছাকৃতভাবে খুব ভাঙা দেখায়)।
এই কৌশলটি খুব জটিল টেবিলের জন্যও কাজ করে, এমনকি যেগুলিতে নেস্টেড টেবিল রয়েছে:
রেন্ডার করা হয়েছে
বিস্তারিত | |||||
---|---|---|---|---|---|
ক্যোয়ারী প্যারামিটার |
| ||||
শরীরের অনুরোধ | অনুরোধের বডি খালি হতে হবে। | ||||
অনুমোদন | নিম্নলিখিত 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
) একটি <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">
নাম | বর্ণনা |
---|---|
এক মাছ | এটি এক মাছের বর্ণনা |
দুই মাছ | এটি দুটি মাছের বর্ণনা |
লাল মাছ | এটি লাল মাছের বর্ণনা |
নীল মাছ | এটি নীল মাছের বর্ণনা |
অন্যান্য মাছ | এটি অন্যান্য মাছের বর্ণনা |