এইচটিএমএল <thead> ট্যাগ
<thead> ট্যাগের ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
<thead> |
সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন | সকল ভার্সন |
সংজ্ঞা ও ব্যবহার
এইচটিএমএল টেবিলের হেডার কন্টেন্টগুলোকে গ্রুপ করার জন্য <thead> ট্যাগটি ব্যবহার করা হয়।
একটি টেবিলের প্রত্যেকটি অংশ(বডি, হেডার, ফুটার) আলাদা আলাদা ভাবে নির্দিষ্ট করার ক্ষেত্রে <tfoot> এবং <tbody> এলিমেন্টের সাথে <thead> এলিমেন্টটি ব্যবহার করা হয়।
স্বাধীনভাবে টেবিল বডিকে স্ক্রলিং করা জন্য ব্রাউজার এই এলিমেন্টগুলো ব্যবহার করে। এছাড়াও যখন একটি বড় টেবিল (যেটি একের অধিক পেজে জায়গা নেয়) প্রিন্ট করা হয় তখন এই এলিমেন্টগুলো প্রত্যেক পেজের শুরু এবং শেষে হেডার এবং ফুটার যুক্ত করার ক্ষেত্রে আলাদা ভূমিকা রাখে।
<thead> ট্যাগটিকে অবশ্যই নিম্নলিখিত উপায় অনুযায়ী লিপিবদ্ধ করতে হবেঃ
<tfoot>এলিমেন্টটি অবশ্যই<table>এলিমেন্টের চাইল্ড হিসেবে বসবে।<caption>এবং<colgroup>এলিমেন্টের পরে।<tbody>এবং<tfoot><tr>পূর্বে বসবে।
নিচের উদাহরণে <thead>, <tfoot>, এবং <tfoot> এলিমেন্টসহ একটি এইচটিএমএল টেবিল দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল tbody ট্যাগ</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>মাস</th>
<th>সঞ্চয়</th>
</tr>
</thead>
<tfoot>
<tr>
<td>মোট</td>
<td>১৮,০০০ টাকা</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>জানুয়ারি</td>
<td>১০,০০০ টাকা</td>
</tr>
<tr>
<td>ফেব্রুয়ারি</td>
<td>৮,০০০ টাকা</td>
</tr>
</tbody>
</table>
</body>
</html>
বিঃদ্রঃ ডিফল্টভাবে <thead>, <tbody>, এবং <tfoot> এলিমেন্ট টেবিলের লেআউটে কোনো প্রভাব ফেলে না।
যাইহোক, এই এলিমেন্টগুলোকে স্টাইল করতে সিএসএস ব্যবহার করুন।
ফলাফল
টীকা ও মন্তব্যঃ
<thead>এলিমেন্টের ভিতর অবশ্যই এক বা তার অধিক<tr>ট্যাগ থাকতে হবে।<thead>,<tbody>, এবং<tfoot>এলিমেন্ট টেবিলের লেআউটে কোনো প্রভাব ফেলে না। যাইহোক, এই এলিমেন্টগুলোকে স্টাইল করতে সিএসএস ব্যবহার করুন।
এট্রিবিউট
নিচের টেবিলে <thead> ট্যাগের এট্রিবিউট, এট্রিবিউটের ভ্যালু এবং তাদের ব্যবহার তুলে ধরা হলোঃ
| এট্রিবিউট | ভ্যালু | বর্ননা |
|---|---|---|
| align | right left center justify char |
এইচটিএমএল(৫) এ সাপোর্ট করে না।<thead> এলিমেন্টের ভিতরের কন্টেন্টের alignment নির্ধারণ করে। |
| char | character | এইচটিএমএল(৫) এ সাপোর্ট করে না।<thead> এলিমেন্টের ভিতরের কন্টেন্টকে ক্যারেক্টারকে align করে। |
| charoff | number | এইচটিএমএল(৫) এ সাপোর্ট করে না।char এট্রিবিউটের মাধ্যমে নির্দিষ্ট করা <thead> এর কন্টেন্টগুলো কয়টি ক্যারেক্টারে align এল্যাইন হবে তা নির্ধারণ করে। |
| valign | top middle bottom baseline |
এইচটিএমএল(৫) এ সাপোর্ট করে না।<thead> এলিমেন্টের ভিতরের কন্টেন্টকে ভার্টিক্যাললি align করে। |
<thead> ট্যাগে গ্লোবাল এবং ইভেন্ট এট্রিবিউট সাপোর্ট করে কিনা?
| গ্লোবাল এট্রিবিউট | ইভেন্ট এট্রিবিউট |
|---|---|
| সাপোর্ট করে | সাপোর্ট করে |
<thead> ট্যাগের ডিফল্ট স্টাইল
অধিকাংশ ব্রাউজারেই <thead> এলিমেন্ট নিম্নলিখিত স্টাইল ভ্যালুগুলো সহকারে প্রদর্শিত হয়ঃ
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}