টেবিল-সম্পর্কিত ট্যাগসমূহ

এই প্রবন্ধে আমরা টেবিল-সম্পর্কিত ট্যাগগুলি ব্যাখ্যা করব।

এটি ব্যাখ্যা করে কিভাবে HTML এ টেবিল এবং টেবিল ক্যাপশন বর্ণনা করতে হয় উদাহরণ সহ।

YouTube Video

টেবিল-সম্পর্কিত ট্যাগসমূহ

<table> ট্যাগ

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• <table> ট্যাগটি একটি টেবিল তৈরি করতে ব্যবহৃত হয় যা সারি এবং কলামে ডেটা সাজিয়ে প্রদর্শন করে।

  <table> ট্যাগটি ডেটা ভিজ্যুয়ালি সংগঠিত করে এবং অনেকগুলি সারি ও কলামে টেবিল তৈরি করে। সারি গঠিত হয় <tr> ট্যাগ দিয়ে, হেডার সেল তৈরি হয় <th> ট্যাগ দিয়ে, এবং ডেটা সেল তৈরি হয় <td> ট্যাগ দিয়ে।

• আপনি CSS ব্যবহার করে টেবিলের স্টাইল এবং বিন্যাস কাস্টমাইজ করতে পারবেন।

<tr> ট্যাগ

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• <tr> ট্যাগটি একটি টেবিলে সারি সংজ্ঞায়িত করতে ব্যবহৃত হয়।

  <tr> ট্যাগটি টেবিলের প্রতিটি সারি তৈরি করতে ব্যবহৃত হয়, যা সেল (<td> বা <th>) ধারণ করে।

• প্রতিটি সারিতে একাধিক কোষ থাকতে পারে, যা টেবিলের সামগ্রিক কাঠামো গঠন করে।

<th> এবং <td> ট্যাগসমূহ

1<th>Header 1</th>
2<td>Data 1</td>

• <th> ট্যাগটি একটি টেবিলের হেডার সেল সংজ্ঞায়িত করে। সাধারণত হেডার সারিতে ব্যবহৃত হয়, সেলের বিষয়বস্তু গাঢ় এবং কেন্দ্রীভূত হয়।
• <td> ট্যাগটি একটি সাধারণ টেবিল ডেটা সেল সংজ্ঞায়িত করে, যা সাধারণ টেবিল ডেটা প্রদর্শন করে।

colspan এবং rowspan গুণাবলি

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan এবং rowspan হল অ্যাট্রিবিউট, যা টেবিল সেল একাধিক কলাম বা সারিতে বিস্তৃত হলে ব্যবহার করা হয়।

• colspan বৈশিষ্ট্যটি একটি কোষকে একাধিক কলামের জুড়ে বিস্তৃত হতে দেয়।
• rowspan গুণাবলি একটি কোষকে একাধিক সারির উপর বিস্তৃত হতে দেয়।

<thead>, <tbody>, <tfoot> ট্যাগসমূহ

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• <thead> ট্যাগ টেবিলের হেডার বিভাগ সংজ্ঞায়িত করতে ব্যবহৃত হয়। এটি সাধারণত কলামের শিরোনামগুলি ধারণ করে।

  <thead> ট্যাগটি টেবিলের উপরে অবস্থিত থাকে, যা কলামের শিরোনাম বা হেডার সংজ্ঞায়িত করে। এটি তথ্যের বিভাগগুলি স্পষ্টভাবে পার্থক্য করতে সহায়ক।

• <tbody> ট্যাগ টেবিলের বডি বিভাগ সংজ্ঞায়িত করে। এটি তথ্যের সারিগুলি ধারণ করে।

  <tbody> ট্যাগটি টেবিলের তথ্যের মূল বডি ধারণ করে। এটি <thead> এবং <tfoot> ট্যাগগুলির দ্বারা আবৃত সারিগুলির মধ্যে অবস্থিত।

• <tfoot> ট্যাগটি টেবিলের ফুটার অংশ সংজ্ঞায়িত করে, যা মোট বা নোট অন্তর্ভুক্ত করে।

  <tfoot> ট্যাগটি টেবিলের শেষে অবস্থিত এবং মোট বা অন্যান্য টীকা প্রদর্শনের জন্য ব্যবহৃত হয়। এটি বিশেষত সুবিধাজনক বড় তথ্য সেটগুলির জন্য মোট বা সংক্ষিপ্তসার প্রদর্শনের সময়।

<caption> এবং <colgroup> ট্যাগগুলি

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• <caption> ট্যাগটি একটি ক্যাপশন (শিরোনাম) যোগ করে টেবিলের বিষয়বস্তু স্পষ্ট করতে। এটি সাধারণত টেবিলের উপরে স্থাপন করা হয় এবং টেবিলের সামগ্রিক বিষয়বস্তু সারসংক্ষেপ করতে কাজ করে।

• <colgroup> ট্যাগ একটি টেবিলে কলামগুলি দলবদ্ধ করে এবং স্টাইল বা বিন্যাস প্রয়োগ করতে ব্যবহৃত হয়। আপনি <col> ট্যাগটি অন্তর্ভুক্ত করে নির্দিষ্ট কলামের জন্য ব্যাকগ্রাউন্ড রং বা প্রস্থ নির্দিষ্ট করতে পারেন।

টেবিল উদাহরণ

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• The <table> ট্যাগটি একটি টেবিল তৈরি করতে ব্যবহৃত হয় যা সারি এবং কলামে ডেটা প্রদর্শন করে।

• The <thead> ট্যাগটি টেবিলের হেডার সারিগুলিকে গ্রুপ করে। এটি সাধারণত <th> ট্যাগগুলি ধারণ করে, যা হেডার হিসাবে কাজ করে।

• The <tbody> ট্যাগটি টেবিলের প্রধান বিষয়বস্তু গ্রুপ করে। এটি সাধারণত ডেটা সারি ধারণ করে যা <td> ট্যাগ দিয়ে গঠিত।

• The <tfoot> ট্যাগটি টেবিলের ফুটার সারিগুলিকে গ্রুপ করে। এটি মোট বা নোট প্রদর্শনের জন্য উপযুক্ত।

• The <colgroup> ট্যাগটি টেবিলের কলামগুলিকে গ্রুপ করে এবং সমগ্র কলামের স্টাইল প্রয়োগ করতে ব্যবহৃত হয়।

• The <caption> ট্যাগটি টেবিলের জন্য একটি ক্যাপশন বা শিরোনাম যোগ করে, যা ব্যবহারকারীদের টেবিলের বিষয়বস্তু সহজে বুঝতে সহায়তা করে।

• colspan বৈশিষ্ট্যটি একটি কোষকে একাধিক কলামের জুড়ে বিস্তৃত হতে দেয়।

• rowspan গুণাবলি একটি কোষকে একাধিক সারির উপর বিস্তৃত হতে দেয়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video